【CSS3】化神篇

hrrrrb2025-03-15 20:06

目录

平面转换

作用：为元素添加动态效果，一般与过渡配合使用

概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平面转换又叫 2D 转换

属性名：transform

代码示例：

css 复制代码 
<!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>
        div{
            margin: 100px 0;
            width: 100px;
            height: 100px;
            background-color: #e08b8b;
            transition: all 1s;
        }
        div:hover{
            transform: translate(700px) rotate(360deg) scale(2) skew(360deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 153147

平移

属性名：transform: translate(X轴移动距离, Y轴移动距离);

属性值：

  • 像素单位数值
  • 百分比（参照盒子自身尺寸计算结果）
  • 正负均可

代码示例：

css 复制代码 
<!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>
        .father{
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid black;
        }
        .son{
            width: 200px;
            height: 100px;
            background-color: antiquewhite;
            transition: all 0.5s;
        }
        .father:hover .son{
            transform: translate(150%,200%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 154956

注意事项：

  • translate() 只写一个值，表示沿着 X 轴移动
  • 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

旋转

属性名：transform: rotate(旋转角度);

属性值：

  • 角度单位是 deg
  • 取值正负均可
  • 取正顺时针旋转，取负逆时针旋转

代码示例：

css 复制代码 
<!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 1s;
        }
        img:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./img/3.jpg" alt="">
</body>
</html>

结果如下：

屏幕录制 2025-03-13 162633

改变旋转原点

默认情况下，旋转远点是盒子中心点

属性名：transform-origin: 水平原点位置 垂直原点位置;

属性值：

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

代码示例：

css 复制代码 
<!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 1s;
            transform-origin: right bottom;
        }
        img:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./img/3.jpg" alt="">
</body>
</html>

结果如下：

屏幕录制 2025-03-13 163957

多重转换

先平移再旋转

属性名：transform: translate() rotate();

代码示例：

css 复制代码 
<!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>
        div{
            width: 1200px;
            height: 200px;
            border: 1px solid black;
        }
        img{
            width: 200px;
            transition: all 4s;
        }
        div:hover img{
            transform: translateX(500%) rotate(360deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="./img/4.jpg" alt="">
    </div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 165216

注意事项：

  • 不能先旋转再平移，因为旋转会改变坐标轴向
  • 复合属性不能分开写，否则后面的属性会覆盖前面的属性

缩放

属性名：

  • transform: scale(缩放倍数);
  • transform: scale(X轴缩放倍数, Y轴缩放倍数);

属性值：

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

代码示例：

css 复制代码 
<!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>
        div{
            width: 200px;
            height: 143px;
            margin: 100px auto;
        }
        img{
            width: 200px;
            transition: all 4s;
        }
        div:hover img{
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div>
        <img src="./img/4.png" alt="">
    </div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 171831

倾斜

属性名：transform: skew();

属性值：

  • 角度度数 deg
  • 取正向左倾斜，取负向右倾斜

代码示例：

css 复制代码 
<!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>
        div{
            width: 200px;
            height: 143px;
            margin: 100px auto;
        }
        img{
            width: 200px;
            transition: all 2s;
        }
        div:hover img{
            transform: skew(30deg)
        }
    </style>
</head>
<body>
    <div>
        <img src="./img/4.png" alt="">
    </div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 174606

渐变

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

线性渐变

属性名：

css 复制代码 
background-image: linear-gradient(
	渐变方向,
	颜色1 终点位置,
	颜色2 终点位置,
	......
);

属性值：

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

代码示例：

css 复制代码 
<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: #a0adf7;
            background-image: linear-gradient(
                45deg, 
                red,
                #f8a4a4,
                #a0adf7
            );
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

结果如下：

径向渐变

作用：给按钮添加高光效果

属性名：

css 复制代码 
background-image: radial-gradient(
	半径 at 圆心位置,
	颜色1 终点位置,
	颜色2 终点位置,
	......
);

属性值：

  • 半径可以是两条，则为椭圆
  • 圆心位置取值：像素单位数值/百分比/方位名词

代码示例：

css 复制代码 
<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            background-image: radial-gradient(
                50px at center center,
                red,
                pink
            );
        }
        button{
            width: 100px;
            height: 40px;
            background-color: purple;
            border: 0;
            border-radius: 5px;
            color: white;
            background-image: radial-gradient(
                30px at center center,
                rgba(255,255,255,0.2),
                transparent
            );
        }
    </style>
</head>
<body>
    <div></div>
    <button>按钮</button>
</body>
</html>

结果如下：

空间转换

空间：是从坐标轴角度定义的 X、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴与视线方向相同

空间转换也叫 3D 转换

属性：transform

平移

属性名：

  • transform: translate3d(x,y,z);
  • transform: translateX();
  • transform: translateY();
  • transform: translateZ();

属性值：

  • 像素单位数值
  • 百分比（参照盒子自身尺寸计算结果）

代码示例：

html 复制代码 
<!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>
        .box{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 0.5s;
        }
        .box:hover{
            transform: translate3d(100px,200px,300px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 194159

注意事项：默认无法观察 Z 轴平移效果

视距

作用：制定了观察者与 z=0 平面的距离，为元素添加透视效果

透视效果：近大远小、近实远虚

属性名：perspective: 视距;

属性值：

  • 添加给父级，取值范围 800-1200

代码示例：

html 复制代码 
<!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>
        .father{
            perspective: 1000px;
        }
        .son{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 0.5;
        }
        .son:hover{
            transform: translateZ(-300px);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 195356

旋转

属性名：

transform: rotateZ() 沿着 Z 轴旋转

transform: rotateX() 沿着 X 轴旋转

transform: rotateY() 沿着 Y 轴旋转

transform: rotate3d(x,y,z,角度度数); x，y，z 取值为 0-1 之间的数字

代码示例：

html 复制代码 
<!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>
        div{
            width: 300px;
            margin: 100px auto;
            perspective: 1000px;
        }
        img{
            width: 200px;
            transition: all 2s;
        }
        .d1 img:hover{
            transform: rotateZ(360deg);
        }
        .d2 img:hover{
            transform: rotateX(60deg);
        }
        .d3 img:hover{
            transform: rotateY(60deg);
        }
    </style>
</head>
<body>
    <div class="d1">
        <img src="./img/3.jpg" alt="">
    </div>
    <div class="d2">
        <img src="./img/1.png" alt="">
    </div>
    <div class="d3">
        <img src="./img/2.png" alt="">
    </div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 201450

左手法则

根据旋转方向确定取值正负

左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向

立体呈现

作用：设置元素的子元素是位于 3D 空间中还是平面中

属性名：transform-style

属性值：

  • flat：子级处于平面中
  • preserve-3d：子级处于 3D 空间中

呈现立体图形步骤：

  1. 父元素添加 transform-style: preserve-3d;
  2. 子级定位
  3. 调整子盒子的位置（位移或旋转）
html 复制代码 
<!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>
        .cube{
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* background-color: pink; */
            transition: all 1s;
            transform-style: preserve-3d;
        }
        .cube div{
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }
        .front{
            background-color: orange;
            transform: translateZ(100px);
        }
        .back{
            background-color: green;
            transform: translateZ(-100px);
        }
        .cube:hover{
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 213518

缩放

属性名：

  • transform: scale3d(x,y,z);
  • transform: scaleX();
  • transform: scaleY();
  • transform: scaleZ();

代码示例：

html 复制代码 
<!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>
        .cube{
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* background-color: pink; */
            transition: all 4s;
            transform-style: preserve-3d;
            transform: scale3d(1.5,2,3);
        }
        .cube div{
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }
        .front{
            background-color: orange;
            transform: translateZ(100px);
        }
        .back{
            background-color: green;
            transform: translateZ(-100px);
        }
        .cube:hover{
            transform: rotate3d(1,1,1,90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 220517

动画

过渡：实现两个状态间的变化过程

动画：实现多个动态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

代码示例：

html 复制代码 
<!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>
        .d1{
            width: 1000px;
            height: 200px;
            border: 1px solid black;
        }
        .d2{
            width: 200px;
            height: 200px;
            background-color: pink;
            animation: change 1s infinite alternate;
        }
        @keyframes change {
            0% {
                transform: translate(0);
            }
            100% {
                transform: translate(800px);
            }
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2"></div>
    </div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 221903

使现步骤

定义动画

  • 两个状态
css 复制代码 
@keyframes 动画名称 {
    from {}
    to {}
}
  • 多个状态
css 复制代码 
@keyframes 动画名称 {
    0% {}
    10% {}
    ......
    100% {}
}

使用动画

animation: 动画名称 动画花费时长;

代码示例：

html 复制代码 
<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            animation: change 10s;
        }
        @keyframes change {
            0% {
                width: 200px;
                height: 200px;
            }
            25% {
                width: 400px;
                height: 200px;
            }
            75% {
                width: 400px;
                height: 400px;
            }
            100% {
                border-radius: 50%;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-13 235715

animation 复合属性

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

  • 速度曲线：
    • linear：匀速运动
    • steps()：括号里填数字，表示分几步完成动画
  • 重复次数：
    • infinite：无限循环重复播放
  • 动画方向：
    • alternate：反向执行
  • 执行完毕时状态：
    • backwards：开始状态
    • forwards：结束状态

代码示例：

html 复制代码 
<!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>
        .box{
            width: 200px;
            height: 100px;
            background-color: pink;
            animation:  change 1s linear 1s 3 alternate forwards;
        }
        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 800px;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-14 002430

注意事项：

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值，第一个时间值表示动画时长，第二个时间值表示延迟时间

animation 属性拆分

属性 作用 取值
animation-name 动画名称
animation-duration 动画时长
animation-delay 延迟时间
animation-fill-mode 动画执行完毕时状态 forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function 速度曲线 steps (数字)：逐帧动画
animation-iteration-count 重复次数 infinite 为无限循环
animation-direction 动画执行方向 alternate 为反向
animation-play-state 暂停动画 paused 为暂停，通常配合:hover 使用

逐帧动画

核心原理：

  • steps() 逐帧动画
  • CSS 精灵图

精灵动画制作步骤：

  1. 准备显示区域：盒子尺寸与一张精灵小图尺寸相同
  2. 定义动画：移动背景图（移动距离 = 精灵图宽度）
  3. 使用动画：strps(N)，N 与精灵小图个数相同

代码示例：

html 复制代码 
<!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>
        div{
            width: 140px;
            height: 140px;
            border: 1px solid black;
            background-image: url(./img/01.png);
            animation: run 1s steps(12) infinite;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-14 144049

多组动画

语法格式：

css 复制代码 
animation: 
	动画1,
	动画2,
	......
;

代码示例：

html 复制代码 
<!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>
        div{
            width: 140px;
            height: 140px;
            /* border: 1px solid black; */
            background-image: url(./img/01.png);
            animation: 
                run 1s steps(12) infinite,
                move 5s linear forwards
                ;
        }
        @keyframes run {
            from {
                background-position: 0 0;
            }            
            to {
                background-position: -1680px 0;
            }
        }
        @keyframes move {
            0% {
                transform: translate(0);
            }
            100% {
                transform: translate(800px);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

结果如下：

屏幕录制 2025-03-14 144234

相关推荐
驯龙高手_追风15 分钟前
谷歌Chrome或微软Edge浏览器修改网页任意内容
前端·chrome·edge
luckyext27 分钟前
Postman发送GET请求示例及注意事项
前端·后端·物联网·测试工具·小程序·c#·postman
小满zs1 小时前
React第三十章(css原子化)
前端·react.js
一直在学习的小白~1 小时前
前端项目中创建自动化部署脚本，用于 Jenkins 触发 npm run publish 来完成远程部署
前端·自动化·jenkins
Perfect—完美1 小时前
Vue 3 事件总线详解：构建组件间高效通信的桥梁
前端·javascript·vue.js
二川bro1 小时前
模拟类似 DeepSeek 的对话
前端·人工智能
祈澈菇凉2 小时前
Vue 中如何实现自定义指令？
前端·javascript·vue.js
sorryhc2 小时前
解读Ant Design X API流式响应和流式渲染的原理
前端·react.js·ai 编程
1024小神2 小时前
vue/react前端项目打包的时候加上时间，防止后端扯皮
前端·vue.js·react.js
拉不动的猪3 小时前
刷刷题35(uniapp中级实际项目问题-2）
前端·javascript·面试
热门推荐
01从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek各版本说明与优缺点分析04Unity图形学之法线贴图原理05DeepSeek RAGFlow构建本地知识库系统06本地部署DeepSeek教程（Mac版本）07Windows 11 安装 Dify 完整指南 非docker环境08如何本地部署AI智能体平台，带你手搓一个AI Agent09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10KGG转MP3工具|非KGM文件|解密音频