CSS3如何实现旋转变换
的有关信息介绍如下：
css3的变换（transform）属性主要有两个作用：
1、构建一些css2中难以构造的图形，把一些有ps做的工作交个浏览器渲染本身；
2、配合JavaScript制作更为丰富的动画。
transform的兼容性如下：
ie10、Firefox、Opera支持transform属性
ie9支持替代的-ms-transform属性（仅适用于2D转换）
Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换）
Opera值支持2D转换
transform属性有很多选项，rotate是比较常用的一种，rotate英文是轮转、回转的意思，在css3中用于元素的旋转，其基本语法：
transform：rotate（角度值）；
为rotate传入一个角度值作为参数，元素将圆中轴线顺时针偏转这个角度值
例子：
css部分：
.div1{
width:200px;
height:200px;
border:2px solid firebrick;
margin:50px auto;
text-align: center;
line-height: 200px;
}
.div2{
width:200px;
height:200px;
border:2px solid firebrick;
margin:50px auto;
text-align: center;
line-height: 200px;
transform:rotate(10deg);
}
html部分：
效果如图：
用rotateX（角度值）则表示沿X轴方向上旋转
例子：
css部分：
.div3{
width:200px;
height:200px;
border:2px solid cadetblue;
margin:50px auto;
text-align: center;
line-height: 200px;
transform:rotateX(60deg);
}
html部分：
效果如图：
同样的，用rotateY（角度值）则表示沿Y轴方向上旋转
例子：
css部分：
.div4{
width:200px;
height:200px;
border:2px solid cadetblue;
margin:50px auto;
text-align: center;
line-height: 200px;
transform:rotateY(60deg);
}
html部分：
效果如图：
rotateZ（角度值）等效于rotate（角度值）
例子：
css部分：
.div5,.div6{
width:200px;
height:200px;
border:2px solid cadetblue;
margin:50px auto;
text-align: center;
line-height: 200px;
}
.div5{
transform:rotateZ(60deg);
}
.div6{
transform:rotate(60deg);
}
html部分：
效果如图：
如果需要在其他向量上运用旋转，可以使用rotate3d(x,y,z,deg)，编辑x,y,z的值构建三维向量，最后一个参数值是旋转的角度。
例子：
css部分：
.div7,.div8,.div9,.div10,.div11{
width:200px;
height:200px;
border:2px solid cadetblue;
margin:50px auto;
text-align: center;
line-height: 200px;
}
.div7{
transform:rotate3d(0,0,0,60deg)
}
.div8{
transform:rotate3d(1,0,0,60deg)
}
.div9{
transform:rotate3d(0,1,0,60deg)
}
.div10{
transform:rotate3d(0,0,1,60deg)
}
.div11{
transform:rotate3d(1,-1,-1,60deg)
}
html部分：
效果如图：
注意，transform的兼容性，具体代码如下：
transform:rotate(10deg);/*标准*/
-ms-transform:rotate(10deg);/*ie9*/
-moz-transform:rotate(10deg);/*fireFox*/
-webkit-transform:rotate(10deg);/*Safari、Chrome*/
-o-transform:rotate(10deg);/*Opera*/
