使用纯CSS实现3D旋转效果的示例代码
发布时间:2020-01-03 15:39:54 作者:CoderMiner 我要评论
这篇文章主要介绍了使用纯CSS实现3D旋转效果的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
主要使用CSS中的 preserve-3d 、perspective 属性实现3D效果
效果
HTML代码
1 2 3 4 5 6 7 8 9 10 | < body > < div class = "box" > < div class = "face front" > < h2 >前面</ h2 > </ div > < div class = "face back" > < h2 >背面</ h2 > </ div > </ div > </ body > |
为了演示效果,将元素居中,body的css设置
1 2 3 4 5 6 7 8 9 10 11 12 13 | *{ margin : 0 ; padding : 0 ; } body{ width : 100% ; height : 100 vh; display : flex; justify- content : center ; align-items: center ; background : #333 ; } |
box 属性设置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .box{ width : 300px ; height : 400px ; transform-style: preserve -3 d; position : relative ; } .face{ position : absolute ; left : 0 ; top : 0 ; width : 100% ; height : 100% ; transform-style: preserve -3 d; display : flex; justify- content : center ; align-items: center ; backface- visibility : hidden ; transition: 2 s ease-in-out; transform: perspective( 500px ) rotateY( 0 deg); } |
前面属性设置
背面属性设置,在Y轴旋转 180度,先不显示
1 2 3 4 5 | .face.back{ background : #3bc2ff ; color : #fff ; transform: perspective( 500px ) rotateY( 180 deg); } |
设置悬浮的动画效果
1 2 3 4 5 6 7 | .box:hover .face.front{ transform: perspective( 500px ) rotateY( 180 deg); } .box:hover .face.back{ transform: perspective( 500px ) rotateY( 360 deg); } |
设置文字的悬浮效果
1 2 3 4 5 | .box .face h 2 { font-size : 4em ; text-transform : uppercase ; transform: perspective( 500px ) translateZ( 50px ); } |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了CSS3实现酷炫的3D旋转透视效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-21
- 这篇文章主要介绍了HTML5+css3:3D旋转木马效果相册,主要运用了perspective和tranlateY这两个知识点,有需要的可以了解一下。2017-01-03
- 点击登陆面板会发生360度旋转,并显示信息,真正使用CSS3让登陆面板3D旋转起来,如何实现登陆面板3D旋转,感兴趣的小伙伴们可以参考一下2016-05-03
- 这篇文章主要为大家详细介绍了CSS3 3D旋转rotate效果实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-05-03
- 这篇文章主要介绍了CSS3近阶段篇之酷炫的3D旋转透视 的相关资料,需要的朋友可以参考下2016-04-28
- 有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现更好的展示2016-03-21
- 这篇文章主要介绍了css3实现3d旋转动画特效,使用CSS3实现了3d立方体的左旋转,右旋转,上下旋转等效果,十分实用,有需要的小伙伴来参考下吧2015-03-10
最新评论