transform 旋转效果
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
属性值：
3D旋转
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换（它只支持 2D 转换）。
rotate()
rotateX()沿着X轴进行旋转
rotateY()沿着Y轴进行旋转
div
{
//transform:totateX(130deg);
//-webkit-transform: rotateX(130deg); /* Safari 和 Chrome */
//-moz-transform: rotateX(130deg); /* Firefox */
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
transform-origin(x,y,z) 属性允许您改变被转换元素的位置。
必须和transform一起使用
x值分别可以为center,left,right,length,%
x值分别可以为center,top,bottom,length,%
x值分别可以为length
div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari 和 Chrome */
-webkit-transform-origin:20% 40%; /* Safari 和 Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
transform-style() //属性规定如何在 3D 空间中呈现被嵌套的元素。
必须和transform一起使用
Firefox 支持 transform-style 属性。
Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。
transform-style: flat|preserve-3d;
flat 属性不保留3D位置
preserver-3d 属性保留3D位置
div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg); /* Safari 和 Chrome */
-webkit-transform-style: preserve-3d; /* Safari 和 Chrome */
}
prespective 透视效果 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
与prespective-origin一起使用
目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
perspective: number|none;
number 以像素为单位
none 默认值 不具有透视
div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}
prespective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。
与prespective一起使用
perspective-origin: x-axis y-axis;
x-axis：属性值可以为：left,center,right,length,%
y-axis：属性值可以为：top,center,bottom,length,%
div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari 和 Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari 和 Chrome */
}
backface-visibility 属性定义当元素旋转到背对屏幕时是否可见。
只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。
Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。
backface-visibility: visible|hidden;
visible：可见
hidden：不可见
div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
}