纯 css 实现翻转(flip)效果

纯 css 实现翻转(flip)效果

技术杂谈小彩虹2021-08-19 1:56:15360A+A-

这是我参与更文挑战的第3天,活动详情查看: 更文挑战

实现效果

GIF 2021-6-3 16-33-54.gif

当鼠标滑过包含块时,元素整体翻转 180°,以实现正反面的切换。

内容组成

  1. 首先需要一个最外层的 card 来包裹整个翻转区域
  2. 然后需要正面和反面的内容(这里简单处理只设置正反面的背景颜色来区分)

利用布局

需要让正面和反面重叠在一起,很容易想到外层 card 用相对定位,内层正反都使用绝对定位都相对于外层 card,使其重叠,然后需要设置反面翻转 180°,翻转隐藏背面需要添加 backface-visibility:hidden

注意:都是绝对定位元素后来居上,所以正面需要放到反面后面,或者直接设置正面 z-index 大于反面

实现 3D 效果

翻转效果其实是一个 3D 效果,所以这里需要用到一个属性 transform-style 使得子元素能够表现出翻转效果,同时还要设置 transition 实现过渡动效。

transition 需要一个状态就是 hover 卡片时,卡片翻转也就是 card 翻转 180°

补充说明

如果想实现垂直翻转就修改 rotateYrotateX

如果想通过点击事件来触发翻转,那么在点击事件中添加刪除 card 的类即可

重点总结

  • 动画效果:添加 transition 过度
  • 正反重叠:最外层相对定位,内部正反两面绝对定位,反面先翻转 180°
  • 隐藏背面:正反面添加 backface-visibility:hidden
  • hover 翻转:卡片 hover 翻转 180°
  • 3D 效果:卡片添加 transform-style 使子元素 3D 空间呈现

具体代码实现

<div class="card-filp">
  <div class="back"></div>
  <div class="front"></div>
</div>

<style> .card-filp { height: 200px; width: 200px; position: relative; transform-style: preserve-3d; transition: 1s; } .front, .back { height: 100%; width: 100%; position: absolute; left: 0; top: 0; backface-visibility:hidden } .front { background: lightgreen; } .back { background: lightblue; } .back { transform: rotateY(180deg); } .card-filp:hover { transform: rotateY(180deg); } </style>

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们