css3中transform属性 CSS3 transform-style 属性

css3中transform属性

CSS3中的transform属性是一个非常强大的属性，它可以让我们对元素进行2D或3D变换，包括旋转、缩放、移动、倾斜等。它可以让我们创造出各种有趣的效果，而且还可以使用CSS3动画来实现动态效果。

transform: rotate(45deg);  //旋转45度
transform: scale(2, 3);  //水平方向放大2倍，竖直方向放大3倍
transform: translate(50px, 100px);  //水平方向位移50px，竖直方向位移100px
transform: skewX(30deg);  //水平方向倾斜30度

此外，CSS3中还有一个matrix()函数，它可以将所有上面的变形效果集中在一个函数里面。matrix()函数有6个参数：a,b,c,d,e,f。a-f分别代表旋转、缩放、位移、倾斜的不同参数。

CSS3 transform-style 属性

div
{
transform: rotateY(60deg);
transform-style: preserve-3d;
-webkit-transform: rotateY(60deg);	
-webkit-transform-style: preserve-3d;	
}

transform-style: flat|preserve-3d;