当前位置：首页 > news >正文

实用指南：【前端基础】20、CSS属性——transform、translate、transition

news 2026/6/14 13:31:12

一、`transform`概念

transform 的作用：允许对某一个元素进行某些形变，包括旋转、缩放、倾斜、平移等
并非所有盒子都可以机进行transform 形变。通常行内级元素不能进行形变。
- 例如：span 元素、a 元素

二、`transform`的用法

在这里插入图片描述
常见的函数 transform function：

平移：translate(x, y)
缩放：scale(x, y)
旋转：rotate(x, y)
倾斜：skew(deg, deg)

三、平移：`translate(x, y)`

平移：translate(x, y)
- 这个函数用于移动元素在平面上的位置
值的个数：
- 一个值：设置 x 轴上的位移
- 两个值：设置 x 轴和 y 轴上的位移
值类型
- 具体数值（100px）
- 百分比（参照元素本身）
  - 如果设置 x 位移：参考的就是自身的宽度
  - 如果设置 y 位移：参考的就是自身的高度

四、`translate` 的补充

translate 是 translateX 和 translateY 函数的缩写。
- 设置 x 轴：translateX
- 设置 y 轴：translateY
translate 的百分比可以完成一个元素的水平和垂直居中

<!DOCTYPE html><html><head><title>Document</title><style>.container {height: 500px;width: 500px;border: 5px solid red;display: inline-block;background-color: antiquewhite;}.box1 {height: 200px;width: 200px;background-color: aqua;/* transform: translate(100px); *//* transform: translate(50%, 50%); *//* transform: translateX(20%); */position: relative;top: 50%;transform: translateY(-50%);}</style></head><body><div class="container"><div class="box1">box1</div></div></body></html>

五、缩放：`scale(x, y)`

缩放：scale(x, y)
- 改变元素的大小
值个数
- 一个值：设置 x 轴上的缩放。（y 轴默认也是一样的值）
- 两个值：设置 x 轴和 y 轴上的缩放
值类型
- 数字
  - 1：保持不变
  - 2：放大一倍
  - 0.5：缩小一半
- 百分比：不常用
scale 是 scaleX 和 scaleY 函数的缩写。
- 设置 x 轴：scaleX
- 设置 y 轴：scaleY

<!DOCTYPE html><html><head><title>Document</title><style>.container {height: 200px;width: 200px;border: 5px solid red;display: inline-block;background-color: antiquewhite;}.box1 {height: 200px;width: 200px;background-color: aqua;/* transform: scale(0.5); */transform: scale(0.5, 0.3);}</style></head><body><div class="container"><div class="box1">box1</div></div></body></html>

六、旋转：`rotate(x, y)`

值个数
- 一个值：表示旋转角度
值类型
- 常用单位 deg：表示旋转角度
- 正数：顺时针旋转
- 负数、逆时针旋转

rotate 是 rotateZ 函数的缩写。
rotate 有很多单位
- 角度（deg）
- 百分度（grad）
- 弧度（rad）
- 圈数（turn）

七、`transform-origin`

进行旋转或者说缩放的时候，都会有一个原点，所以 transform-origin 的作用就是：修改当前形变的原点位置
语法：transform-origin: x-axis y-axis z-axis;
CSS3之transform-origin详解
CSS3新属性篇(二)：transform-origin属性
值类型
- 必须是长度<length>、百分比percentage、或者 left、center、right、top、bottom关键字中的一个
  - left、center、right、top、bottom关键字
  - 长度<length>：从左上角开始计算
  - 百分比percentage：参考元素本身的大小

<!DOCTYPE html><html><head><title>Document</title><style>.container {height: 200px;width: 200px;border: 5px solid red;display: inline-block;background-color: antiquewhite;margin-left: 500px;margin-top: 300px;}.box1 {height: 200px;width: 200px;background-color: aqua;/* transform: rotate(25deg) */transform-origin: 100% 50%;transform: rotate(90deg)}</style></head><body><div class="container"><div class="box1">box1</div></div></body></html>