使用纯CSS如何实现3D旋转效果
小编给大家分享一下使用纯CSS如何实现3D旋转效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联公司服务项目包括宿豫网站建设、宿豫网站制作、宿豫网页制作以及宿豫网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,宿豫网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到宿豫省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
主要使用CSS中的 preserve-3d 、perspective 属性实现3D效果
效果
HTML代码
前面
背面
为了演示效果,将元素居中,body的css设置
*{ margin: 0; padding: 0; } body{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: #333; }
box 属性设置
.box{ width: 300px; height: 400px; transform-style: preserve-3d; position: relative; } .face{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; display: flex; justify-content: center; align-items: center; backface-visibility: hidden; transition: 2s ease-in-out; transform: perspective(500px) rotateY(0deg); }
前面属性设置
.face.front{ background: #ff0; }
背面属性设置,在Y轴旋转 180度,先不显示
.face.back{ background: #3bc2ff; color: #fff; transform: perspective(500px) rotateY(180deg); }
设置悬浮的动画效果
.box:hover .face.front{ transform: perspective(500px) rotateY(180deg); } .box:hover .face.back{ transform: perspective(500px) rotateY(360deg); }
设置文字的悬浮效果
.box .face h3{ font-size: 4em; text-transform: uppercase; transform: perspective(500px) translateZ(50px); }
看完了这篇文章,相信你对“使用纯CSS如何实现3D旋转效果”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
当前名称:使用纯CSS如何实现3D旋转效果
网址分享:http://pwwzsj.com/article/ghiiie.html