2D 转换

CSS 2D 转换允许你对元素进行平移、旋转、缩放、倾斜等操作

以下是相关方法的语法和用法示例

1.移动 translate

将元素从当前位置移动到新的位置

语法

transform: translate(tx, ty);

• tx：水平移动的距离正值为右负值为左

• ty：垂直移动的距离正值为下负值为上如果省略默认值为 0

示例

div:hover {
  transform: translate(50px, 20px);
}

• 将元素向右移动 50px向下移动 20px

2.旋转元素 rotate

旋转元素

语法

transform: rotate(angle);

• angle：旋转的角度单位为 deg正值为顺时针负值为逆时针

示例

div:hover {
  transform: rotate(45deg);
}

• 将元素顺时针旋转 45 度

3.沿 X 轴缩放元素 scaleX

沿 X 轴缩放元素

语法

transform: scaleX(sx);

• sx：缩放比例1 表示原始大小2 表示放大两倍0.5 表示缩小一半

示例

div:hover {
transform: scaleX(1.5);
}

• 将元素的宽度放大 1.5 倍

4.沿 Y 轴缩放元素 scaleY

沿 Y 轴缩放元素

语法

transform: scaleY(sy);

• sy：缩放比例1 表示原始大小2 表示放大两倍0.5 表示缩小一半

示例

div:hover {
  transform: scaleY(0.5);
}

• 将元素的高度缩小一半

5.同时沿 X 轴和 Y 轴缩放元素 scale

同时沿 X 轴和 Y 轴缩放元素

语法

transform: scale(sx, sy);

• sx：X 轴缩放比例

• sy：Y 轴缩放比例如果省略默认值与 sx 相同

示例

div:hover {
  transform: scale(0.5, 1.5);
}

• 将元素的宽度放大0.5倍高度放大 1.5 倍

6.沿 X 轴倾斜元素 skewX

沿 X 轴倾斜元素

语法

transform: skewX(angle);

• angle：倾斜的角度单位为 deg

示例

div:hover {
  transform: skewX(30deg);
}

• 将元素沿 X 轴倾斜 30 度

7.沿 Y 轴倾斜元素 skewY

沿 Y 轴倾斜元素

语法

transform: skewY(angle);

• angle：倾斜的角度单位为 deg

示例

div:hover {
  transform: skewY(-30deg);
}

• 将元素沿 Y 轴倾斜 -30 度

8.同时沿 X 轴和 Y 轴倾斜元素 skew

同时沿 X 轴和 Y 轴倾斜元素

语法

transform: skew(ax, ay);

• ax：X 轴倾斜角度

• ay：Y 轴倾斜角度如果省略默认值为 0

示例

div {
  transform: skew(20deg, 10deg);
}

• 将元素沿 X 轴倾斜 20 度沿 Y 轴倾斜 10 度

9.通过矩阵实现复杂的 2D 转换 matrix

通过矩阵实现复杂的 2D 转换

语法

transform: matrix(a, b, c, d, e, f);

• a, b, c, d：定义线性变换

• e, f：定义平移

示例

div {
  transform: matrix(1, 0.5, -0.5, 1, 0, 0);
}

• 使用矩阵实现旋转、缩放、倾斜等复杂变换

3D 转换

CSS 3D 转换允许你在三维空间中对元素进行旋转、平移、缩放等操作。与 2D 转换不同，3D 转换引入了 Z 轴（深度轴），使元素可以在三维空间中移动和旋转。以下是 rotateX()、rotateY() 和 rotateZ() 的详细说明。为方便演示，给每个div元素增加了过度效果 transition: transform 2s。

1.围绕 X 轴 旋转元素 rotateX

围绕 X 轴 旋转元素。

语法

transform: rotateX(angle);

• angle：旋转的角度，单位为 deg（度）。

  • 正值：元素的前部向上旋转，后部向下旋转。

  • 负值：元素的前部向下旋转，后部向上旋转。

示例

div:hover {
  transform: rotateX(200deg);
}

• 元素围绕 X 轴旋转 200 度，前部向上倾斜，后部向下倾斜。

2.围绕 Y 轴 旋转元素 rotateY

围绕 Y 轴 旋转元素。

语法

transform: rotateY(angle);

• angle：旋转的角度，单位为 deg（度）。

  • 正值：元素的右侧向前旋转，左侧向后旋转。

  • 负值：元素的右侧向后旋转，左侧向前旋转。

示例

div {
  transform: rotateY(180deg);
}

• 元素围绕 Y 轴旋转 180 度，右侧向前倾斜，左侧向后倾斜。

3.围绕 Z 轴 旋转元素 rotateZ

围绕 Z 轴 旋转元素。

语法

transform: rotateZ(angle);

• angle：旋转的角度，单位为 deg（度）。

  • 正值：元素顺时针旋转。

  • 负值：元素逆时针旋转。

示例

div {
  transform: rotateZ(180deg);
}

• 元素围绕 Z 轴顺时针旋转 180 度。

以下是关于 transform-origin、transform-style、perspective、perspective-origin 和 backface-visibility 的详细说明：

改变被转换元素的位置 transform-origin

作用：允许你改变被转换元素的原点位置。默认情况下，转换的原点是元素的中心点，但可以通过 transform-origin 修改。

语法

transform-origin: x-axis y-axis z-axis;

• x-axis：水平方向的原点位置，可以是长度值（如 10px）、百分比（如 50%）或关键字（如 left、center、right）。

• y-axis：垂直方向的原点位置，可以是长度值、百分比或关键字（如 top、center、bottom）。

• z-axis（可选）：Z 轴的原点位置，通常用于 3D 转换。

示例

div {
  transform: rotateZ(180deg);
  transform-origin:20% 40%;
}

规定被嵌套元素如何在 3D 空间中显示transform-style

作用：它决定子元素是否保留其 3D 转换效果。

语法

transform-style: flat | preserve-3d;

• flat（默认）：子元素不保留 3D 转换效果，会被压平到父元素的 2D 平面中。

• preserve-3d：子元素保留其 3D 转换效果。

示例

#div1 {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 100px;
  padding:10px;
  border: 1px solid black;
}

#div2 {
  padding:50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  transform: rotateY(60deg);
  transform-style: preserve-3d;
  -webkit-transform: rotateY(60deg); /* Safari and Chrome */
  -webkit-transform-style: preserve-3d; /* Safari and Chrome */
}

#div3 {
  padding:40px;
  position: absolute;
  border: 1px solid black;
  background-color: yellow;
  transform: rotateY(80deg);
  -webkit-transform: rotateY(-60deg); /* Safari and Chrome */
}

<div id="div1">
  <div id="div2">HELLO
  	<div id="div3">YELLOW</div>
  </div>
</div>

• 子元素在 3D 空间中旋转，保留其 3D 效果。

规定 3D 元素的透视效果 perspective

作用：规定 3D 元素的透视效果，定义观察者与元素的距离。值越小，透视效果越强。

语法

perspective: distance | none;

• distance：观察者与元素的距离，通常为长度值（如 500px）。值越小，透视效果越明显。

• none（默认）：无透视效果。

示例

div {
  transform: rotateY(45deg);
  perspective: 500px;
}

• 元素围绕 Y 轴旋转 45 度，并具有透视效果。

规定 3D 元素的透视点perspective-origin

作用：规定 3D 元素的透视点（即观察者的位置）。默认值为 50% 50%（中心点）。

语法

perspective-origin: x-axis y-axis;

• x-axis：水平方向的位置，可以是长度值、百分比或关键字（如 left、center、right）。

• y-axis：垂直方向的位置，可以是长度值、百分比或关键字（如 top、center、bottom）。

示例

div {
  transform: rotateY(45deg);
  perspective: 500px;
  perspective-origin: top left;
}

• 元素围绕 Y 轴旋转 45 度，透视点位于左上角。

定义元素在不面对屏幕时是否可见backface-visibility

作用：定义元素在不面对屏幕时是否可见。通常用于 3D 转换中，控制元素的背面是否显示。

语法

backface-visibility: visible | hidden;

• visible（默认）：背面可见。

• hidden：背面不可见。

示例

div {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

• 元素旋转 180 度后，背面不可见。