🔵CSS3空间变换

本文最后更新于：2024年4月25日 上午

2D转换

transform属性

该属性用于元素的2D与3D转换

🥝元素偏移

translate(posX, posY)相对原始位置偏移(posX, posY)

1
2
3
div {
  transform: translate(80px, 80px);
}

动画效果如下:



🥝元素旋转

rotate(ndeg)元素顺时针转动ndeg

1
2
3
div {
  transform: rotate(360deg);
}

动画效果如下:

🥝元素缩放

  • scaleX(x)元素宽度缩放x倍
  • scaleY(y)元素高度缩放y倍
  • scale(x, y)元素宽度缩放x倍,元素高度缩放y倍
1
2
3
4
5
div {
  transform: scaleX(0.5) scaleY(2);
  /* 等效缩写 */
  transform: scale(0.5, 2);
}

动画效果如下:

🥝元素倾斜

  • skewX(ndeg)沿x轴倾斜ndeg
  • skewY(mdeg)沿y轴倾斜mdeg
  • skew(ndeg, mdeg)沿x轴倾斜ndeg,沿y轴倾斜mdeg
1
2
3
4
5
6
7
8
9
10
11
12
/* 动画一 */
div {
  transform: skewX(80deg);
}
/* 动画二 */
div {
  transform: skewY(80deg);
}
/* 动画三 */
div {
  transform: skew(80deg, 80deg);
}

动画效果如下:





🥝方法缩写

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())以上方法的缩写

角度为其正切值

1
2
3
4
5
6
div {
  transform: scaleX(0.5) skewY(80deg) skewX(80deg) scaleY(2) translateX(80px) translateY(80px);
  /* 等价缩写 */
  transform: matrix(0.5, 5.6, 5.6, 2, 80, 80);
  /* tan(80deg) ≈ 5.6 */
}







transform-origin

该属性用于改变元素旋转中心位置(默认原点为元素几何中心位置)

  • center 50%
  • top/right 第一个参数
  • bottom/left 第二个参数
1
2
3
4
5
6
7
8
9
10
11
12
/* 动画一 */
div {
  transform-origin: 0 0;
}
/* 动画二(默认) */
div {
  transform-origin: 50% 50%;
}
/* 动画三 */
div {
  transform-origin: 100% 100%;
}

动画效果如下:



3D转换

transform属性

该属性用于元素的2D与3D转换

🍉元素移动

  • translateX(posX)向x轴正方向偏移posX
  • translateY(posY)向y轴正方向偏移posY
  • translateZ(posZ)向Z轴正方向偏移posZ
  • translate3d()向x轴正方向偏移posX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 动画一 */
div {
  transform: translateX(80px);
}
/* 动画二 */
div {
  transform: translateY(80px);
}
/* 动画三(默认z轴运动无`perspective`属性故看不出效果) */
div {
  transform: translateZ(80px);
}
/* 动画四 */
div {
  transform: translate3d(80px, 80px, 80px);
}

动画效果如下:




🍉元素旋转

  • rotateX(ndeg)绕x轴顺时针旋转ndeg
  • rotateY(mdeg)绕y轴顺时针旋转mdeg
  • rotateZ(kdeg)绕z轴顺时针旋转kdeg
  • rotate3d(x, y, z, ndeg)绕x轴顺时针旋转(x * n)deg,绕y轴顺时针旋转(y * n)deg,绕z轴顺时针旋转(z * n)deg(x, y, z ∈ [0, 1])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 动画一 */
div {
  transform: rotateX(360deg);
}
/* 动画二 */
div {
  transform: rotateY(360deg);
}
/* 动画三 */
div {
  transform: rotateZ(360deg);
}
/* 动画四 */
div {
  transform: rotate3d(1, 1, 1, 360deg);
}

动画效果如下:

🍉元素缩放

  • scaleX(x)
  • scaleY(y)
  • scaleZ(z)
  • scale3d(x, y, z)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 动画一 */
div {
  transform: scaleX(0.5);
}
/* 动画二 */
div {
  transform: scaleY(2);
}
/* 动画三 */
div {
  transform: scaleZ(2);
}
/* 动画四 */
div {
  transform: scale3d(0.5, 2, 2);
}

动画效果如下:

🍉方法缩写(不推荐)

1
2
3
div {
  transform: matrix3d(?????)
}

transform-origin属性

元素在三维坐标下的元素旋转中心位置,同2D转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 动画一 */
div {
  transform-origin: 50% 50% 0;
  transform: rotateY(360deg);
}
/* 动画二 */
div {
  transform-origin: 50% 50% -25px;
  transform: rotateY(360deg);
}
/* 动画三 */
div {
  transform-origin: 100% 50% -25px;
  transform: rotateY(360deg);
}

动画效果如下:

transform-style属性

该属性设至子元素在容器内的展示方式(该属性不会继承)

1
2
3
4
5
6
7
8
9
/* 动画一父容器 */
.2d {
  transform-style: flat;
}

/* 动画二父容器 */
.3d {
transform-style: preserve-3d;
}

动画效果如下:


perspective属性

该属性表示子元素的透视效果,添加后子元素z轴运动有缩放效果

1
2
3
4
5
6
7
.perspective {
  perspective: 200px;
}

.translate {
  transform: translateZ(80px);
}
1
2
3
4
5
6
7
8
9
<div>
  <!-- 动画一 -->
  <div class="translate"></div>
</div>

<div class="perspective">
  <!-- 动画二 -->
  <div class="translate"></div>
</div>

动画效果如下:

perspective-origin属性

该属性设置子元素透视效果观察点位置,需配合perspective-origin属性使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 动画一父容器 */
div {
  perspective: 200px;
  perspective-origin: 0 0;
}

/* 动画二父容器(默认) */
div {
  perspective: 200px;
  perspective-origin: 50% 50%;
}

/* 动画三父容器 */
div {
  perspective: 200px;
  perspective-origin: 100% 100%;
}

动画效果如下:

backface-visibility属性

该属性设定元素背面是否可见(默认可见)

1
2
3
4
5
div {
  transform: rotateY(360deg);
  backface-visibility: hidden;     /* 动画一 */
  backface-visibility: visible;    /* 动画二 */
}

动画效果如下:

参考文档:

《CSS教程 (w3school)》

《css3基础知识点--transform 3D变换坐标系、perspective透视距离》阿俊的博客-CSDN博客

CSS > 基础
#CSS
🔵CSS3空间变换
https://qingshaner.com/CSS3空间变换/
作者
清山
发布于
2022年2月17日
许可协议