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