transform变换方式: (旋转,缩放,位移,变形)
transform作用于:rotate函数,scale函数,translate函数,skew函数 (旋转,缩放,位移,变形)
1:rotate函数(旋转)(单位:deg
):
写法: transform: rotateZ(-45deg);
1:默认值是z轴:可以想象鸟的视角
2:x轴转动:可以想象成一个人站在你的屏幕前后空翻动作
3:y轴转动:可以想象成一个人站在你的屏幕前转身动作
2.scale函数(缩放)
写法: transform: scaleX(0.5)(缩小0.5);
transform: scale(1.2)(放大1.2);
3.translate函数(位移)
以x轴和Y轴位移
写法:transform:translate(100px,-40px)
注意: transform: translate(50%)是向移动X轴,自身宽度的一半 。
4:skew函数
以x轴和y轴形变
写法: transform: skewX(10deg);
transform变换起点:
以左上角为原点 :transform-origin: 0 0;
以x轴0点为原点 :transform-origin: 0;