下面是《翻转的少女》图，它是以图片自身的水平中心线为轴的，这样的旋转，如果旋转元素是人物图，就不宜大角度旋转，因为大角度旋转会使图片倒立，会产生人物翻跟斗现象，这个画面还是不要的好（我设置的是90deg）。这样，图片只是翻转了一个角度，不至于上下颠倒，获得一个近似纵向缩放的效果，请看下图。 代码： ＜style type="text/css"＞ .背景图片{
width: 680px; height: 450px; /*背景图片宽高*/
border-radius: 30px; /*背景图片圆角半径*/
background-image:url(http://img4.oldkids.cn/upload/260811000/u260810070/
2016/11/21/blog_ 20161121093513628418.gif);
}
.翻转图{
width:230px; height:350px; /*立方体面的宽高*/
position:absolute; margin-top:40px; left:540px; /*绝对定位*/
transform-style:preserve-3d; /*默认flat 2D */
animation:翻 15s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
}
.翻转图 div{
width:100%;
height:100%;
position:absolute; /*绝对定位*/
opacity:1.0; /*透明度*/
}
.翻转图 .图1{transform: translate(-150px) ;}
.翻转图 .图2{transform: translate(-40px) ;}
.翻转图 .图3{transform: translate(110px) ;}
.翻转图 .图4{transform: translate(230px) ;}
@keyframes 翻{
0%{transform:rotateX(-90deg) ;}
100%{transform:rotateX(0deg) ;}
}
＜/style＞
＜div class="背景图片"＞
＜div class="翻转图"＞
＜div class="图1"＞ ＜img src="http://img4.oldkids.cn/upload/260811000/u260810070/2016/08/25/blog_
20160825224210292577.gif" /＞＜/div＞
＜div class="图2"＞ ＜img src="http://img2.oldkids.cn/upload/260811000/u260810070/2016/11/18/blog_
20161118230102985205.gif" /＞＜/div＞
＜div class="图3"＞ ＜img src="http://img2.oldkids.cn/upload/260811000/u260810070/2016/08/26/blog_
20160826165927313282.gif" /＞＜/div＞
＜div class="图4"＞ ＜img src="http://img1.oldkids.cn/upload/260811000/u260810070/2016/11/19/blog_
20161119173325943290.gif" /＞＜/div＞
＜/div＞
＜/div＞ 代码解析： 代码中已有注释，此不再赘。 | 
