这篇文章主要介绍了纯css3实现走马灯效果，主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，有需要的小伙伴参考下
纯css3实现了一个正六边形的走马灯效果，记录一下css3动画的学习情况，效果如下：
主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，另外加一点平面几何知识（计算间距、角度啥的），详细过程如下：
首先设计一下要显示的布局（俯视图），途中垂直的线为辅助线，计算偏移量时需要用的：
立即学习“前端免费学习笔记（深入）”；
红色框框为旋转面（即走马灯效果的结构最终以该面的中点为旋转轴旋转的），六个面也都是基于这个面做的布局，先看红框下面的三个面，左侧的面原本在蓝色线处，通过旋转到达绿色线处，右边同理，中间的面只需要在Z轴方向移动二分之根号三个边长的距离即可，所有的面均通过偏移和旋转的方式达到上图的结构，需要注意的是要保证有图案的面（本例中使用的是文字，思路一致）要向外，比如上面中间的面，在Z轴向外偏移二分之根号三个边长的距离之后还要以中点为圆心旋转180°，所有的面同理易得。在此过程中需要牢记的一点技术是：三维坐标系中，从坐标原点出发，向着坐标轴的正方向看去，逆时针旋转时rotate(X/Y/Z)的值为正数，顺时针旋转时，rotate(X/Y/Z)值为负数。
设置结构：一个3D场景、一个走马灯的旋转面和走马灯的六个面：
1
2
3
4
5
6
设置3D场景：
.wapper{ -webkit-perspective:800; /*观察距离800*/ -webkit-perspective-origin:50% -100%; /*从正前方上方斜向下观察*/ width:400px; height:300px; margin:100px auto;}
设置旋转面：
@-webkit-keyframes rotation{ /*动画过程*/ 0%{-webkit-transform:rotateY(0deg);} 100%{-webkit-transform:rotateY(-360deg);}}.rotate{ -webkit-transform-style:preserve-3d; /*3D变换*/ -webkit-animation: rotation 6s infinite; /*动画名称、时间、循环动画*/ -webkit-animation-timing-function: linear; /*匀速动画*/ -webkit-transform-origin:center; /*沿中间旋转*/ width:100%; height:100%; position:relative; /*相对定位布局*/}
对六个面除了位置之外的通用样式做设置：
.item{ -webkit-transform-origin:center; /*均沿中心旋转*/ width:198px; height:300px; position:absolute; /*绝对定位在旋转面上*/ background:none; text-align:center; line-height:300px;}
分别设置六个面的位置，以一号为例（上面结构图中红框下面左边绿色线标注的面），所有的数值均需要经过几何计算得来：
.itemOne{ left:-50px; -webkit-transform:translateZ(87px) rotateY(-60deg); /*z轴向外移动87px，沿Y轴方向旋转-60°*/ background:#f00;}
在鼠标悬浮在该结构上时动画停止：
.rotate:hover{ -webkit-animation-play-state:paused; /*设置动画状态*/}
本例子只有在webkit内核的浏览器中可以查看效果，如需兼容其他现代浏览器，需添加 -moz- 等前缀，完整代码如下：
Animation Test *{margin:0;padding:0;} @-webkit-keyframes rotation{ 0%{-webkit-transform:rotateY(0deg);} 100%{-webkit-transform:rotateY(-360deg);} } .wapper{ -webkit-perspective:800; -webkit-perspective-origin:50% -100%; width:400px; height:300px; margin:100px auto; } .rotate{ -webkit-transform-style:preserve-3d; -webkit-animation: rotation 6s infinite; -webkit-animation-timing-function: linear; -webkit-transform-origin:center; width:100%; height:100%; position:relative; } .item{ -webkit-transform-origin:center; width:198px; height:300px; position:absolute; background:none; text-align:center; line-height:300px; } .itemOne{ left:-50px; -webkit-transform:translateZ(87px) rotateY(-60deg); background:#f00; } .itemTwo{ left:100px; -webkit-transform:translateZ(173px); background:#ff0; } .itemThree{ left:250px; -webkit-transform:translateZ(87px) rotateY(60deg); background:#0ff; } .itemFour{ left:250px; -webkit-transform:translateZ(-87px) rotateY(120deg); background:#0f0; } .itemFive{ left:100px; -webkit-transform:translateZ(-173px) rotateY(180deg); background:#0ff; } .itemSix{ left:-50px; -webkit-transform:translateZ(-87px) rotateY(-120deg); background:#00f; } .rotate:hover{ -webkit-animation-play-state:paused; }
1
2
3
4
5
6
是不是很炫酷的效果呢，小伙伴们，CSS3真是个好东西，你值得拥有。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
如何使用CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
以上就是用css3实现走马灯的效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610514.html
微信扫一扫 
支付宝扫一扫 
