变形

transform CSS3属性

<style type="text/css">
.tran {
position: absolute;
left: 100px;
top: 100px;
width: 300px;
height: 300px;
background: #ccc;
}
.xuanzhuan {
position: relative;
transform:rotate(45deg); 　　//旋转45度
font-size: 160px;
background: #369;
text-align: center;
line-height: 300px;
}
</style>

<div class="tran">
<div class='xuanzhuan'>C</div>
</div>

　　

(1) rotate旋转

transform:none|<transform-function>+
transform:none; //不做变形和动画
rotate(<angle>) //旋转角度
transform:rotate(45deg);

(2)
translate() //移动
translate(<translation-value> [<translate-value>]?) //X轴，Y轴。
translateX()
translateY()

transform:translate(50px); //x移动50，y为0.
transform:translate(50px, 20%); //x轴50px，y轴20%。
transform:translateX(－50px);
transform:translateY(20px);

(3)
scale() //缩放
scale(x, y) //第二个省略，就跟第一个一样。
scaleX(number);
scaleY(number);

transform:scale(1.2); //放大1.2倍，
transform:scale(1， 1.2); //x：1 y：1.2倍，
tranform:scale(0.5);

(4)
skew() //倾斜
//倾斜的角度。第一个是Y向X方向，倾斜几度，第二个是X向Y倾斜几度。
skew(<angle> [, <angle>]?)
skewX(<angle>) //Y向X倾斜
skewY(<angle>) //X向Y倾斜

transform:skew(45deg); //Y轴 向X轴偏移了45度。

(5)
原点的移动。
transform-origin:设定坐标轴位置。原点的位置，相对于这个容器。

transform-origin：50% 50%; //默认
transform-origin：0 0；
transform-origin:20px;
transform-origin:ringht 50px 20px;

(6)
perspective：none|<length> //透视

perspective：100px; //1000px就是人眼，到物体的距离。
在3D空间旋转。

perspective－origin: //原点。

(7)
translate3d(x, y, z) //X,Y,Z轴。
translateX()
translateY()
translateZ()

(8)
scale3D()
scaleX()
scaleY()
scaleZ()

(9)
旋转
rotate3d(x, y, z, <angle>);
rotateX()
rotateY()
rotateZ()

(10)
transform-style:flat|preserve-3d

transform-style:flat //扁平化的设置
transform-style:preserve-3d //设定为3D效果