css3——transform：rotate（旋转）、scale（缩放）、skew（拉伸）、translate（平移）、transform-origin

注意：transform是复合属性，拆开写会替代，先平移再旋转和先旋转再平移的结果是不同的

1. CSS3 转换：transform属性可以对元素进行移动、缩放、转动、拉长或拉伸

注意： Internet Explorer 9 要求前缀 -ms- 版本，Internet Explorer 10, Firefox, 和 Opera支持transform 属性，Chrome 和 Safari 要求前缀 -webkit- 版本。

2. 旋转：transform: rotate();——必须是块元素

（1）以x、y、z轴进行旋转，默认是z轴；

（2）rotateX（）、rotateY（）、rotateZ（）

（3）（）内的值单位是：deg角度

比如：transform: rotate(45deg);

（4）还有一种复合写法：rotate3d（x,y,z,angle）

空间直角坐标系（x,y,z）和原点确定一个轴，然后在该轴上旋转angle的角度

比如：transform: rotate3d(1,1,1,45deg);

注意：

第一种方法：再执行rotateX（）后的图形，再执行rotateY（）

第二种方法：直接在确定的轴上进行角度旋转

两种方法得到的结果是不一样的

3. 缩放：transform：scale（）

值的绝对值>1，就是放大，比如2，就是放大2倍

值的绝对值 0<值<1，就是缩小，比如0.5，就是原来的0.5倍；

值的正负，负值表示图形翻转。

默认情况下，scale（x, y）：以x/y轴进行缩放；如果y没有值，默认y==x；

也可以分开写：scaleX()  scaleY()  scaleZ()，分开写的时候，可以对Z轴进行缩放

第二种写法：transform：scale3d（x, y, z）该写法是上面的方法的复合写法，结果和上面的一样。

比如：transform: scaleX(1.8);

4. 倾斜拉伸：skew（x，y），单位：角度deg

如果只有一个参数，y == 0

分开写：skewX（）和skewY()

正值：将图中的线拉伸

比如：transform: skewX(30deg);

比如：transform: skewY(30deg);

5. transform：translate（）平移

transform：translate（20px）：一个值的时候，表示水平方向的平移20px，垂直方向0px；两个值的时候，水平方向和垂直方向分别平移。

transform：translateX()、transform：translateY()、transform：translateZ()，注意Z轴的平移是面向屏幕的

transform：translate3d(x, y, z)：三个值分别对应三个方向

比如：transform: translate3d(50px, 30px, 20px);

6. transform-origin：改变图形的中心点

当图形的中心点改变后，图片的旋转会受到影响；

中心的默认值：50% 50%，即图形x轴、y轴的50%的位置，这里的百分比是以图形原来盒子长度决定的。包括border、padding、content区

比如：

     .demo1{
            width: 100px;
            height: 100px;
            padding: 20px 0px;
            border: 10px solid black;
            position:absolute;
            top: 100px;
            left: 100px;
            background: green;
            transform-origin: 0% 0%;
            transform: rotate(30deg);
        }

关键词	百分比
top = top center = center top	50% 0%
right = right center = center right	100% 50%
bottom = bottom center = center bottom	50% 100%
left = left center = center left	0% 50%
center = center center	50% 50%
top left = left top	0% 0%
top right = right top	100% 0%
bottom right = right bottom	100% 100%
bottom left = left bottom	0% 100%

7. transform-style：preserve-3d；保留3d效果

比如：

    
    
    
    
    



    

        
HELLO
            
YELLOW