c3新特性

2D移动和旋转

二维平面移动

语法：

transform:translateX(移动的距离) translateY(移动的距离);

Transform:translate(水平移动距离，垂直移动距离)

可以设置负值，水平的正值是向右移动，垂直的正值是向下移动

二维平面旋转

语法：

Transform:rotate(30deg);

旋转原点的设置

transform-origin:center(默认值)

可以设置left,top,right,bottom,center,

百分比设置：transform-origin:水平位置的百分比 垂直位置的百分比

 

3D移动和旋转

透视点

在所看元素的父元素或者是祖先元素上设置透视点

语法:perspective: 1000px;

三维立体的移动

语法：

transform: translateZ(200px);

transform: translate3d(水平移动,垂直移动,z轴移动);

z轴：z轴垂直于屏幕，方向是射向我们。

三维立体的旋转

语法：

/*transform: rotateX(30deg);*/

/*transform: rotateY(30deg);*/

/*transform: rotateZ(30deg);*/

transform: rotate3d(1,1,1,30deg);

解析：rotate3d(x,y,z,30deg),用x,y,z建立一个用原点射向（x,y,z）这个坐标的向量，用这个向量作为轴进行旋转。

 

缩放

语法：

transform:scale(整体放大的倍数)

Transform:scale(水平缩放的倍数，垂直缩放的倍数)

倾斜

语法：transform: skew(15deg,0deg);

小技巧：如果先要文字板正，那么反倾斜即可