<html>
<head>
<title>new document </title>
<meta charset="utf-8">
<style>
@-webkit-keyframes change{
0%{
transform:rotatez(-20deg) rotatey(20deg)
}
50%{
transform:rotatez(-20deg) rotatey(170deg)
}
100%{
transform:rotatez(-20deg) rotatey(360deg)
}
}
body{
perspective:1200px
}
div{
transform-style:preserve-3d
width:800px
height:600px
transform:rotatez(-20deg) rotatey(20deg)
position:relative
transform-origin:500px 300px 0px
-webkit-animation:change 2s linear infinite
}
div:hover{
}
span{
display:block
width:400px
height:400px
border:2px solid blue
border-radius:50%
position:absolute
top:100px
left:300px
}
#s1{
transform:rotatey(0deg) translatez(0px)
}
#s2{
transform:rotatey(30deg) translatez(0px)
}
#s3{
transform:rotatey(60deg) translatez(0px)
}
#s4{
transform:rotatey(90deg) translatez(0px)
}
#s5{
transform:rotatey(120deg) translatez(0px)
}
#s6{
transform:rotatey(150deg) translatez(0px)
}
#s7{
transform:rotatey(180deg) translatez(0px)
}
#s8{
transform:rotatey(210deg) translatez(0px)
}
#s9{
transform:rotatey(240deg) translatez(0px)
}
#s10{
transform:rotatey(270deg) translatez(0px)
}
#s11{
transform:rotatey(300deg) translatez(0px)
}
#s12{
transform:rotatey(330deg) translatez(0px)
}
#d1{
transform:rotatex(0deg) translatez(0px)
}
#d2{
transform:rotatex(30deg) translatez(0px)
}
#d3{
transform:rotatex(60deg) translatez(0px)
}
#d4{
transform:rotatex(90deg) translatez(0px)
}
#d5{
transform:rotatex(120deg) translatez(0px)
}
#d6{
transform:rotatex(150deg) translatez(0px)
}
#d7{
transform:rotatex(180deg) translatez(0px)
}
#d8{
transform:rotatex(210deg) translatez(0px)
}
#d9{
transform:rotatex(240deg) translatez(0px)
}
#d10{
transform:rotatex(270deg) translatez(0px)
}
#d11{
transform:rotatex(300deg) translatez(0px)
}
#d12{
transform:rotatex(330deg) translatez(0px)
}
p{
width:2px
height:505px
position:absolute
top:46px
left:500px
border:2px solid red
border-radius:3px
}
</style>
</head>
<body>
<div>
<p></p>
<span id="s1"></span>
<span id="s2"></span>
<span id="s3"></span>
<span id="s4"></span>
<span id="s5"></span>
<span id="s6"></span>
<span id="s7"></span>
<span id="s8"></span>
<span id="s9"></span>
<span id="s10"></span>
<span id="s11"></span>
<span id="s12"></span>
<span id="d1"></span>
<span id="d2"></span>
<span id="d3"></span>
<span id="d4"></span>
<span id="d5"></span>
<span id="d6"></span>
<span id="d7"></span>
<span id="d8"></span>
<span id="d9"></span>
<span id="d10"></span>
<span id="d11"></span>
<span id="d12"></span>
</div>
</body>
</html>
css3新增的一个控制元素旋转属性的函数是rotate()[不要怀疑，它的确是一个隐形的函数，他的使用很类似与js中的函数]。同之前所讲过的translate和scale，他也分为2D和3D的旋转，差别就是Z轴的旋转。
现在我们来看实例，代码如下：
<style>
.demo { margin:100px autowidth:300pxheight:300pxbackground:#edededborder:1px dotted #ff0000position:relative}
.fl { width:300pxheight:145pxbackground:#00cb99}
.fr { width:300pxheight:145pxmargin-top:10pxbackground:#0093b4}
.pa { position:absolutetop:75pxleft:75pxwidth:150pxheight:150pxbackground-color:#f2f2f2}
</style>
<div class="demo">
<div class="fl"></div>
<div class="fr"></div>
<div class="pa"></div>
</div>
demo的div里面有三个div，最终实现的效果如下图：
现在我们对其应用rotate，假设不知道里面可以传入几个值，那我们可以分别试试传入不同数量的值对比效果，给demo加上：
transform:rotate(45deg)（旋转45度，deg是degree的缩写，意为角度；当然这只是一个单位，还有别的单位，但不常用；你也可以直接采用数字而不用单位，这个数字会被自动转换为角度）
效果如下图：
我们再给demo加上：
transform:rotate(45deg，45deg)
会发现没有变化，查看代码知道原来这个属性浏览器没有识别出来，这是为什么呢？
这是因为默认的rotate（）只能传入一个旋转角度值，而且默认的角度是以电脑屏幕的基准面，以自己的中心为基准点进行旋转的。说白了他是一个二维的旋转。
那，我么应该怎么rotate进行三维的旋转呢？
很简单我之前又讲到过translate的translate3d这一属性；同样rotate也有rotate3d的旋转属性。
既然是3d，那我们就很自然的知道他有rotateX()/rotateY()/rotateZ()，这三个分支的旋转属性。
现在我们给demo加上
transform:rotate3d(45deg，45deg,0deg)
在浏览器当中我们同样会发现不起效果，原因还是不识别。
其实这就是rotate3d和translate3d，不同的地方，translate3d传入的三个值分别会被解析为XYZ的位移距离，二translate则不会这么解析，官方给出的解析方法是rotate3d(X?,Y?,Z?,angle)也就是你需要对你需要旋转的轴进行判断，如果你要沿着该轴转动那就将该轴的值设置为1，否则为0；然后在后面的angle中设置旋转的角度，需要注意的是，angle只有一个角度值。
所以上面正确的写法是：
transform:rotate3d(1，1,0,45deg)
效果如下图：
分析：
上图画的坐标轴没画好，见谅哈。
横的是X轴，竖的是Y轴，斜线是Z轴(也就是你盯着电脑看视线到电脑这个轴)
rotate的转动基准是以轴来转动的，当多个轴交叠旋转才会形成围绕某个点旋转的效果。
元素默认情况下，他所在的面是Z轴与Y轴所形成的面（或平行面）。当谈围绕X轴转，若传入的为正值，则元素上面会向屏幕里面转动，下面回向屏幕外面转动，也就是向用户转动。其他的几个面也是同样的道理。
现在我们来看沿着单个轴转动的情况，这样会帮助你理解上面这段话。
现在我给demo加上
transform:rotateX(45deg)
有没有发现图象显得没有原来的高了，对比下两边的图象。
其实元素的高度并没有变，而是透视导致。
现象一张纸看他的侧面和看他的正面，所得到的宽度是不一样的。
rotateY()/rotateZ()
这里我就不做介绍了。因为它们的使用和rotateX一样，只是转的角度不同罢了。
好了rotate的初级使用就介绍到这里了。
问问题要有逻辑，要描述清楚需求，语言无法表达的就配图，不然别人根本不知道你要的什么。首先：轴向有3个：x、y、z，都可以理解为某一方向的中心，你要围绕那根转呢？然后：多张图片的合集在空间上有一个共有的全局x、y、z轴接着：每张图片又有自己局部的x、y、z轴你是要全局轴上转还是局部轴上转或者全局和局部轴都转呢？如果你要都转的话，就像地球自转公转一样，那你自转时方向跟公转统一还是反向或是随机呢？每张图片自转速度要统一还是要随机呢，随机速度值有个参考范围么？问题描述不清楚，就包含了很多可能性，你如果问：很多张图片围一个圆圈，图片围绕圆心旋转，那这个问题大方向就只有两个可能了：形式1：“ ⊙ ” 外圈是图片路径，中点是圆心形式2： ”中 ” 口字是图片，中间竖线是圆心 ( 2即把形式1视角方向旋转90度以后的视角 )
