css学习之transform

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 */
}