【聊代码】第八十三集 css样式（之五十三）绕X轴旋转的旋转轮

聊代码（第八十三集）css样式（之五十三）       下面这个动画是由旋转木马演变而来，这样的旋转不应该称作木马了（木马是绕Y轴旋转，这个是绕X轴旋转），称作旋转轮。所以要搞成这个样子，因为它很适于宽大高小的横向长的图片，请看效果。

代码：

＜div align="center"＞

＜style type="text/css"＞#旋转木马 img{

width:400px; height: 200px;

position: absolute; left:0px; top:0px;

border:6px solid teal;

}

#旋转木马 img:nth-child(1){ transform: rotateX(90deg) translateZ(280px); }

#旋转木马 img:nth-child(2){ transform: rotateX(45deg) translateZ(280px); }

#旋转木马 img:nth-child(3){ transform: rotateX(90deg) translatez(280px); }

#旋转木马 img:nth-child(4){ transform: rotateX(135deg) translatez(280px); }

#旋转木马 img:nth-child(5){ transform: rotateX(180deg) translatez(280px); }

#旋转木马 img:nth-child(6){ transform: rotateX(225deg) translatez(280px); }

#旋转木马 img:nth-child(7){ transform: rotateX(270deg) translatez(280px); }

#旋转木马 img:nth-child(8){ transform: rotateX(315deg) translatez(280px);

}

#main{

margin: 70px auto;/*让父元素居中*/

width: 400px; height: 200px;

transform-style: preserve-3d;

animation-name: animate;

animation-duration: 50s; /*动画完成一个周期需用的秒数*/

animation-iteration-count: infinite; /*动画循环无限 */

animation-timing-function: linear;

position: relative;

}

@keyframes animate {

0%{ transform: rotateX(0deg) rotateY(20deg) ; }

100%{ transform: rotateX(360deg) rotateY(-20deg) ; } }

＜/style＞

＜div id="旋转木马"＞

＜img src="http://www.oldkids.cn/upload/2018/10/18/blog_20181018101500961.jpg" /＞

＜img src="http://www.oldkids.cn/upload/2018/10/19/blog_20181019111816792.jpg" /＞

＜img src="http://www.oldkids.cn/upload/2018/10/18/blog_20181018101836165.jpg" /＞

＜img src="http://www.oldkids.cn/upload/2018/10/18/blog_20181018102014272.jpg" /＞

＜img src="http://www.oldkids.cn/upload/2018/10/18/blog_20181018102130992.jpg" /＞

＜img src="http://www.oldkids.cn/upload/2018/10/18/blog_20181018102305955.jpg" /＞

＜img src="http://www.oldkids.cn/upload/2018/10/19/blog_20181019110820627.jpg" /＞

＜img src="http://www.oldkids.cn/upload/2018/10/19/blog_20181019111118219.jpg" /＞

＜/div＞

代码解析：

在红色代码中，其中 width:400px; height: 200px; 是表示图片边框线宽高的。position: absolute 绝对定位。 border:6px solid teal 规定图片边框线的厚度、样式、颜色。

在黄色代码中， translatez(280px) 是确定 z 轴上的距离的。其像素值的大小决定图片的间距大小。

在绿色代码中， width: 400px; height: 200px; 规定图片宽高。

在粉色代码中， rotateX(-20deg) 设置视角。正负值的交替变化使旋转有左右摇摆的效果。