副队长CSS教程(38)–transform 变换

文章目录

[1. 前言](#1. 前言)
[2. translate 位移变换](#2. translate 位移变换)
[3. scale 缩放变换](#3. scale 缩放变换)
[4. rotate 旋转变换](#4. rotate 旋转变换)
[5. skew 倾斜变换](#5. skew 倾斜变换)
[6. 多个变换组合使用](#6. 多个变换组合使用)
[7. 总结](#7. 总结)

1. 前言

需要注意的是，本章内容对CSS入门者来说，不是必须掌握的，了解即可。

transform 变换用来改变元素的几何形态，可以实现位移、缩放、旋转、倾斜。transform 本身没有动画效果，只是修改元素外观，想要平滑变化，一般搭配 transition 过渡一起使用。transform 变换不会改变文档流，不会挤压其他元素，性能很好。本篇讲解 transform 常用变换函数，每个代码示例前介绍实现思路。

2. translate 位移变换

translate 用于移动元素，不会影响页面其他元素布局。可以单独设置 X 轴、Y 轴方向的偏移，也可以一次性同时设置两个方向。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>translate位移示例</title>
    <style>
        .box {
            width:120px;
            height:120px;
            background-color:#409eff;
            border-radius:8px;
            color:#fff;
            text-align:center;
            line-height:120px;
            /*通过上一篇的过渡，来控制变换发生所需的时间*/
            transition: transform 0.4s;
        }
        .box:hover {
            /* X向右移动30px，Y向下移动20px */
            transform: translate(30px,20px);
        }
    </style>
</head>
<body>
    <div class="box">悬浮移动</div>
</body>
</html>

悬浮前：

悬浮后：

使用要点：

translate (X,Y)，X 正数向右，负数向左；Y 正数向下，负数向上；
translateX () 只控制水平方向，translateY () 只控制垂直方向；
经常用来做元素居中，配合定位实现无需宽高的居中效果。

3. scale 缩放变换

scale 用来放大或者缩小元素，默认基准点是元素中心点。大于 1 代表放大，小于 1 代表缩小，支持单独设置 X、Y 轴缩放比例。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>scale缩放示例</title>
    <style>
        .box {
            width:120px;
            height:120px;
            background-color:#67c23a;
            border-radius:8px;
            color:#fff;
            text-align:center;
            line-height:120px;
            /*控制变换所需时间*/
            transition: transform 0.4s;
        }
        .box:hover {
            /* 整体放大1.2倍 */
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div class="box">悬浮放大</div>
</body>
</html>

悬浮前:

悬浮后：

使用要点：

scale (1) 为原始大小，scale (0) 元素完全消失；
scaleX 单独水平缩放，scaleY 单独垂直缩放；
缩放只是视觉变化，元素原始占位大小不变。

4. rotate 旋转变换

rotate 让元素绕基准点旋转，单位 deg 代表角度。正数顺时针旋转，负数逆时针旋转。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>rotate旋转示例</title>
    <style>
        .box {
            width:120px;
            height:120px;
            background-color:#e6a23c;
            border-radius:8px;
            color:#fff;
            text-align:center;
            line-height:120px;
            transition: transform 0.4s;
        }
        .box:hover {
            transform: rotate(15deg);
        }
    </style>
</head>
<body>
    <div class="box">悬浮旋转</div>
</body>
</html>

悬浮前：

悬浮后：

使用要点：

rotate 仅支持旋转角度，单位 deg；
默认绕元素中心点旋转，可以通过 transform-origin 修改旋转原点；
旋转不会改变元素的布局占位。

5. skew 倾斜变换

skew 可以对元素进行斜切扭曲，分为水平倾斜和垂直倾斜，单位 deg。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>skew倾斜示例</title>
    <style>
        .box {
            width:120px;
            height:120px;
            background-color:#f56c6c;
            border-radius:8px;
            color:#fff;
            text-align:center;
            line-height:120px;
            transition: transform 0.4s;
        }
        .box:hover {
            transform: skew(10deg,5deg);
        }
    </style>
</head>
<body>
    <div class="box">悬浮倾斜</div>
</body>
</html>

悬浮前：

悬浮后：

使用要点：

skew (水平倾斜角度，垂直倾斜角度)；
skewX 只水平斜切，skewY 只垂直斜切；
倾斜只是视觉扭曲，不改变元素在文档流中的占位。

6. 多个变换组合使用

多个变换效果可以写在同一个 transform 属性内，使用空格隔开，同时生效。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>transform多效果组合</title>
    <style>
        .box {
            width:120px;
            height:120px;
            background-color:#722ed1;
            border-radius:8px;
            color:#fff;
            text-align:center;
            line-height:120px;
            transition: transform 0.4s;
        }
        .box:hover {
            transform: translate(10px,0) scale(1.1) rotate(5deg);
        }
    </style>
</head>
<body>
    <div class="box">位移+放大+旋转组合</div>
</body>
</html>

悬浮前：

悬浮后：

使用要点：

多个变换函数空格分隔，顺序会影响最终效果；
不能写多个 transform 属性，后面的会覆盖前面；
浏览器优先使用 GPU 渲染 transform，性能优于修改 top、left。

7. 总结

transform 包含四类常用函数：translate 位移、scale 缩放、rotate 旋转、skew 倾斜；
transform 只改变视觉渲染，不改变文档流占位，浏览器渲染性能高；
多个变换效果写在同一个 transform 属性，空格分隔；
transform 本身没有动画，搭配 transition 实现平滑过渡，搭配 animation 实现连续关键帧动画。