transfrom属性是元素位移及形变

370 字

2 分钟

transfrom属性是元素位移及形变

2026-03-15

Web前端笔记

无标签

transform格式#

函数功能

translate：控制元素平移
scale：控制元素缩放大小
rotate：控制元素旋转，在2D下默认是Z轴
skew：控制元素倾斜角度
translate3d：控制元素平移
scale3d：控制元素缩放大小
rotate3d：控制元素旋转
skew3d：控制元素倾斜角度

函数用法

1
.element {
2
    transform: translate(X轴移动位置, Y轴移动位置) scale(缩放比例，1为基础) rotate(角度) skew(相对于X轴的倾斜角度, 相对于Y轴的倾斜角度);
3
}

3d会比普通的的多一个Y值，最后一项是旋转角度，前面的X,Y,Z则是方向

使用transition制作元素外观之间的简单变换动画，但是类似于图形的移动，形变等并不太方便通过原本属性进行变换的则可以使用transform属性进行变换。其中形变可以使用3D的一些效果，就分为2D和3D两个部分

2D#

实现（translate为例，其他根据用法带入即可）

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>transform属性</title>
6
    <style>
7
      .box {
8
        width: 100px;
9
        height: 100px;
10
        background-color: tomato;
11
        transition: transform 1s;
12
      }
13
      .box:hover {
14
        transform: translate(50%);
15
      }
16
    </style>
17
  </head>
18
  <body>
19
    <div class="box"></div>
20
  </body>
21
</html>

3D#

需要在父元素中创建3D效果展示区域，便于展示

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>transform3D属性</title>
6
    <style>
7
      .container {
8
        transform-style: preserve-3d;
9
        perspective: 800px;
10
      }
11
      .box {
12
        width: 100px;
13
        height: 100px;
14
        background-color: tomato;
15
        transition: transform 1s;
16
      }
17
      .box:hover {
18
        transform: rotate3d(1, 0, -1, 30deg); /* 或者是transform: rotateX(30deg) rotateZ(-30deg) */
19
      }
20
    </style>
21
  </head>
22
  <body>
23
    <div class="container">
24
      <div class="box"></div>
25
    </div>
26
  </body>
27
</html>

transfrom属性是元素位移及形变

https://ivoinkwell.xyz/posts/web-frontend/css-transform/

作者

Ivo

发布于

2026-03-15

许可协议

CC BY-NC-SA 4.0

CSS选择器

固定定位