下面是《Y轴旋转》图，请看效果。 代码： ＜style type="text/css"＞ .背景图片{
width: 680px; height: 450px;
border-radius: 30px; /*背景图片圆角半径*/
background-image:url(http://img3.oldkids.cn/upload/260811000/u260810070/2015/
11/19/blog_20151119105946563322.gif);
}
.旋转图{
width:260px; height:400px; /*移动图的宽高*/
position:absolute; margin-top:40px; left:540px;/*绝对定位*/
transform-style:preserve-3d; /* 默认flat 2D */
transform:rotateX(-30deg) rotateY(-70deg); animation:rotate 25s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */ }
.旋转图 div{
width:100%;
height:100%;
position:absolute; /*绝对定位*/
opacity:.8; /*透明度*/
}
.旋转图 .图1{ transform: translate(-200px) rotateY(90deg); }
.旋转图 .图2{ transform: translate(-80px) rotateY(90deg); }
.旋转图 .图3{ transform: translate(80px) rotateY(90deg); }
.旋转图 .图4{ transform: translate(200px) rotateY(90deg); }
@keyframes rotate{
0%{ transform:rotateY(0deg) rotateY(0deg); }
100%{ transform:rotateY(360deg) rotateY(360deg); }
}
＜/style＞
＜div class="背景图片"＞
＜div class="旋转图"＞
＜div class="图1"＞＜img src="http://image109.360doc.com/DownloadImg/2022/09/1508/252082219_1_20220915081631774.png" /＞＜/div＞
＜div class="图2"＞＜img src="http://image109.360doc.com/DownloadImg/2022/09/1508/252082219_2_2022091508163271.png" /＞＜/div＞
＜div class="图3"＞＜img src="http://image109.360doc.com/DownloadImg/2022/09/1508/252082219_3_20220915081632196.png" /＞＜/div＞
＜div class="图4"＞＜img src="http://image109.360doc.com/DownloadImg/2022/09/1508/252082219_4_20220915081632321.png" /＞＜/div＞
＜/div＞
＜/div＞ 代码解析： 代码中已有注释，此不再赘。 | 
