css3移动旋转缩放

 》》2D转换

  

属性有：

• transform
• transform-origin---transform-origin:20% 40% ; 设置旋转元素的基点位置（值可以是left right... 百分比  长度单位）
  

属性值有：

• translate(50px,100px）--x轴y轴移动  
• rotate(30deg)--旋转角度（默认顺时针，逆时针设置负数）   
• scale(2,3)-- x轴y轴缩放比    
• skew(30deg,20deg)--x轴y轴倾斜角度

 transform属性设置转换

1.移动

.div1{                     

            transform-origin:;

            transform: translate(50px,100px);

            -ms-transform: translate(50px,100px); /* IE 9 */

            -webkit-transform: translate(50px,100px); /* Safari and Chrome */          

        }

2.旋转

.div2{

             transform: rotate(30deg);

            -ms-transform: rotate(30deg); /* IE 9 */

            -webkit-transform: rotate(30deg); /* Safari and Chrome */

        }

3.缩放

.div3{

            -ms-transform:scale(0.5,1.2); /* IE 9 */

            -webkit-transform: scale(0.5,1.2); /* Safari */

            transform: scale(0.5,1.2); /* 标准语法 */

        }

4.x轴y轴倾斜

.div4{

             transform: skew(30deg,20deg);

            -ms-transform: skew(30deg,20deg); /* IE 9 */

            -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */

        }

5.几种同时使用写法（旋转和倾斜最好避免同时使用）：

.div5{

             transform-origin:;

            transform: translate(50px,100px) rotate(30deg) scale(0.5,1.2));

            -ms-transform: translate(50px,100px) rotate(30deg) scale(0.5,1.2); /* IE 9 */

            -webkit-transform: translate(50px,100px) rotate(30deg) scale(0.5,1.2) ; /* Safari and Chrome */  

        }   

 

 》》3D转换

  

属性有：

• transform-style---transform-style: flat|preserve-3d; 2d 3d效果
• perspective---perspective: number|none; 设置从何处查看一个元素的角度：
• perspective-origin---perspective-origin: x-axis y-axis;  设置一个3D元素的基数位置：
• backface-visibility---backface-visibility: visible|hidden;定义当元素不面向屏幕时是否可见

1.x轴旋转

   transform: rotateX(180deg);

         -webkit-transform: rotateX(180deg); /* Safari 与 Chrome */

     }

2.y轴旋转

.div7{

        transform: rotateY(130deg);

        -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */

     }

tip:其他方法同2d转换，3d转换时想象成三维立体空间操作