本文共 1406 字，大约阅读时间需要 4 分钟。

2D转换概念

2D转换

2D转换是改变标签在二维平面上的位置和形状。常见的2D转换方法包括移动、旋转和缩放。

2D转换 - 移动

移动是2D转换中最基本的操作，主要用于水平和垂直方向上的位移。

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

关键点：

• 2D的移动主要是指水平、垂直方向上的移动。
• translate的最大优点是不会影响其他元素的位置。
• translate中的100%单位，是相对于本身的宽度和高度来进行计算的。
• 行内标签没有效果。

代码示例：

div {
    background-color: lightseagreen;
    width: 200px;
    height: 100px;
    transform: translate(100px, 100px); /* 水平垂直移动100px */
    transform: translateX(100px); /* 水平移动100px */
    transform: translateY(100px); /* 垂直移动100px */
}

2D转换 - 旋转

旋转是让元素在二维平面内顺时针或逆时针旋转。

语法：

关键点：

• 角度为正时，顺时针方向旋转。
• 角度为负时，逆时针方向旋转。
• 默认旋转的中心点是元素的中心点。

代码示例：

img:hover {
    transform: rotate(360deg); /* 顺时针旋转360度，相当于没有旋转 */
}

设置旋转中心点（transform-origin）：

transform-origin 用于设置旋转的中心点，默认是元素的中心点（50% 50%）。

语法：

• x 和 y 可以是像素值或方位名词（top、bottom、left、right、center）。

代码示例：

div {
    transform-origin: 100px 100px; /* 自定义旋转中心 */
}

2D转换 - 缩放

缩放用于控制元素的放大与缩小。

语法：

关键点：

• x 和 y 之间使用逗号分隔。
• 如果只写一个参数，第二个参数会和第一个参数一致。
• scale(1,1) 表示不改变大小。
• scale(2,2) 表示放大两倍。
• scale(0.5,0.5) 表示缩小两倍。
• scale 的最大优势是可以设置转换中心点缩放，默认以中心点缩放。

代码示例：

div:hover {
    transform: scale(0.5, 0.5); /* 缩小50% */
}

2D转换 - 综合写法及顺序问题

关键点：

• 同时使用多个转换时，格式为 transform: translate() rotate() scale()。
• 转换的顺序会影响到效果（先旋转会改变坐标轴方向）。
• 如果同时有位置或其他属性要放到最前面。

代码示例：

div:hover {
    transform: translate(200px, 0) rotate(360deg) scale(1.2); /* 综合使用 */
}

转载地址：http://atux.baihongyu.com/