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

【前端基础】20、CSS属性——transform、translate、transition

news 2025/10/8 5:20:58

一、`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>

八、倾斜：`skew(deg, deg)`

定义了一个元素在二维平面的倾斜转换
值个数
- 一个值：表示 x 轴上的倾斜
- 两个值：表示 x 轴和 y 轴的倾斜
值类型
- deg：旋转角度
- 正数：顺时针旋转
- 负数：逆时针旋转
注意：倾斜原点受到 transform-origin 影响

在这里插入图片描述

九、`transform` 多个值

在这里插入图片描述

十、`transition`概念

什么是transition动画：
- 提供一种更改css属性时控制动画速度的方法。
- 让css的属性变化成为一种：有持续时间的过程，而不是立即生效
  - 例如：将一个元素的位置移动到另一个位置，默认是设置完立即生效
  - 使用 transition 后，可以看到有个动画效果，和PPT中显示内容一样，有缓慢变化的过程。
CSS transition 可以决定：
- 哪些属性发生动画效果
- 何时开始（设置 delay）
- 持续多久（设置 duration）
- 如何动画（定义 timing function，比如匀速缓慢或者先快后慢）