》》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转换时想象成三维立体空间操作