平面转换

平面转换 transform

作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
平面转换又叫 2D 转换

平面转换 – 平移

属性

取值
◆ 像素单位数值
◆ 百分比（参照盒子自身尺寸计算结果）
◆ 正负均可
技巧
◆ translate() 只写一个值，表示沿着 X 轴移动
◆ 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

平移实现居中效果

方法一：

方法二：百分比参照盒子自身尺寸计算结果

平面转换 – 旋转

属性

◆ 角度单位是 deg
技巧
◆ 取值正负均可
◆ 取值为正，顺时针旋转
◆ 取值为负，逆时针旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img
        {
            width: 200px;
            transition: all 2s;
        }
        img:hover 
        {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

平面转换 – 改变转换原点

默认情况下，转换原点是盒子中心点
属性

取值
        方位名词（left、top、right、bottom、center）
        像素单位数值
        百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    img
    {
        width: 200px;
        border: 1px solid #000;
        transition: all 2s;
        transform-origin: right bottom;
    }
    img:hover 
    {
        transform: rotate(360deg);
    }
    </style>
    
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

网页显示为：转动中心点为右下角

平面转换 – 多重转换

多重转换技巧：先平移再旋转

多重转换原理：以第一种转换方式坐标轴为准转换形态
➢ 旋转会改变网页元素的坐标轴向
➢ 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

平面转换 – 缩放

属性

技巧
通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
取值大于1表示放大，取值小于1表示缩小

平面转换 – 倾斜

属性

取值
角度度数 deg

渐变

渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景
分类
线性渐变

径向渐变

线性渐变

属性

取值
        渐变方向：可选
                to 方位名词
                角度度数
        终点位置：可选
                百分比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .e
        {
            display: flex;
        }
        .a
        {
            width: 100px;
            height: 100px;
            background-image: linear-gradient( red, green);
        }
        .b
        {
            width: 100px;
            height: 100px;
            background-image: linear-gradient( 
                to right,
                 red ,
                 green
            );
        }
        .c
        {
            width: 100px;
            height: 100px;
            background-image: linear-gradient( 
                 red 80%,
                 green
            );
        }
        .d
        {
            width: 100px;
            height: 100px;
            background-image: linear-gradient( 
                45deg,
                 red ,
                 green
            );
        }
    </style>
</head>
<body>
    <div class="e">
        <div class="a">1</div>
        <div class="b">2</div>
        <div class="c">3</div>
        <div class="d">4</div>
    </div>
</body>
</html>