CSS2D变换

Posted 2022-11-19 GHUIJS

移动

translate 可以改变元素在页面中的位置，类似定位。

语法：

transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);

tips:

• 定义2D转换中的移动，沿着x和y轴移动元素。
• translate优点：效果不会影响其他元素的位置。
• translate中的百分比单位是相对于自身元素的translate（50%，50%）；
• 此效果对行内标签没有效果。

旋转

语法

transform:rotate (ndeg);

重点：

• rotate 里面跟度数，单位是deg。
• 角度为正时，顺时针，为负时，逆时针旋转。
• 默认旋转的中心是元素的中心点。

改变旋转中心点:

transform-origin：x y；

缩放

transform: scale(2);//长宽等比缩放
transform: scale(1,2);//元素宽高分别缩放
transform: scale(0.5);//值小于1大于0表示缩小

tips:数值不加任何单位,表示倍数。

综合性写法

transform: translate() rotate() scale();

tips:顺序会影响结果,先旋转换改变坐标轴方向。