CSS3新增特性-transfrom

2d转换

1. translate(x_offset,y_offset) ：相对于自身位置的一个偏移，单位可以设置px，%-相对自身的长宽 -> translateX(),translateY()

   .child {
       transfrom: translate(50%, 50%);
   }

   

2. rotate(20deg) 给一个顺时针旋转的度数，可为负 
3. scale(2, 3) 元素的放大缩小 ->scaleX();scaleY()

   .child {
       transform: scale(2,0.5);
   }

   

4. skew(<angle> [,<angle>]) 水平和垂直方向的倾斜 ->skewX();skewY()

   .child {
       transform: skew(30deg,30deg);
   }

      旋转方式

5. matrix() 6个参数 通过矩阵的计算可以代表平移，缩放，旋转，倾斜 
   • 　　matrix(a, b, c, d, e, f)　
   • 

     x’和y‘就是变换之后的水平和垂直坐标

   • 
   • 
   • 平移的话，很明显修改e，f的值
   • 缩放X轴-a，缩放Y轴-d
   • 倾斜 x轴-c ,倾斜 y轴-b
   • 旋转 记住：你旋转的是θdeg的话，写法就是matrix（cosθ，-sinθ,sinθ,cosθ,0,0);

3D转换

1. rotateX(angle) 定义沿X轴的3D旋转  也可以这样写
   • 
2. translateX() 定义沿着X轴的移动
   • 
3. scaleX(2)
   • 
4. 设置父元素transform-style: preserve-3d; // 子元素将保留其 3D 位置。

   .parent {
       transform-style: preserve-3d;
       transform: rotateY(50deg);
   }
   .child {
       transform: translate3d(10px,10px,10px) rotateX(30deg);
   }