【CSS3】化神篇
平面转换作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
平面转换又叫 2D 转换
属性名：transform
代码示例：
<!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轴移动距离);
属性值：
[*]像素单位数值
[*]百分比（参照盒子自身尺寸计算结果）
[*]正负均可
代码示例：
<!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
[*]取值正负均可
[*]取正顺时针旋转，取负逆时针旋转
代码示例：
<!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）
[*]像素单位数值
[*]百分比
代码示例：
<!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();
代码示例：
<!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 表示缩小
代码示例：
<!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
[*]取正向左倾斜，取负向右倾斜
代码示例：
<!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
渐变
渐变是多个颜色渐渐变革的效果，一般用于设置盒子配景
线性渐变
属性名：
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
......
);
属性值：
[*]渐变方向：（可选）
[*]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>
div{
width: 200px;
height: 200px;
background-color: #a0adf7;
background-image: linear-gradient(
45deg,
red,
#f8a4a4,
#a0adf7
);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下：
https://i-blog.csdnimg.cn/direct/fd63cbbd64704652a5664f410d86209a.png
径向渐变
作用：给按钮添加高光效果
属性名：
background-image: radial-gradient(
半径 at 圆心位置,
颜色1 终点位置,
颜色2 终点位置,
......
);
属性值：
[*]半径可以是两条，则为椭圆
[*]圆心位置取值：像素单位数值/百分比/方位名词
代码示例：
<!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>
结果如下：
https://i-blog.csdnimg.cn/direct/07bb31e3d9fe4277aa88ab4dfd2ff61f.png
空间转换
空间：是从坐标轴角度定义的 X、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴与视线方向雷同
空间转换也叫 3D 转换
属性：transform
平移
属性名：
[*]transform: translate3d(x,y,z);
[*]transform: translateX();
[*]transform: translateY();
[*]transform: translateZ();
属性值：
[*]像素单位数值
[*]百分比（参照盒子自身尺寸计算结果）
代码示例：
<!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
代码示例：
<!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 之间的数字
代码示例：
<!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
左手法则
根据旋转方向确定取值正负
左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向
https://i-blog.csdnimg.cn/direct/8794e1ff88c247fbbf3836bfd7d6017a.png
立体呈现
作用：设置元素的子元素是位于 3D 空间中照旧平面中
属性名：transform-style
属性值：
[*]flat：子级处于平面中
[*]preserve-3d：子级处于 3D 空间中
呈现立体图形步调：
[*]父元素添加 transform-style: preserve-3d;
[*]子级定位
[*]调整子盒子的位置（位移或旋转）
<!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();
代码示例：
<!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
动画
过渡：实现两个状态间的变革过程
动画：实现多个动态间的变革过程，动画过程可控（重复播放、终极画面、是否停息）
代码示例：
<!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
使现步调
定义动画
[*]两个状态
@keyframes 动画名称 {
from {}
to {}
}
[*]多个状态
@keyframes 动画名称 {
0% {}
10% {}
......
100% {}
}
使用动画
animation: 动画名称 动画耗费时长;
代码示例：
<!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：结束状态
代码示例：
<!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 精灵图
精灵动画制作步调：
[*]预备表现区域：盒子尺寸与一张精灵小图尺寸雷同
[*]定义动画：移动配景图（移动距离 = 精灵图宽度）
[*]使用动画：strps(N)，N 与精灵小图个数雷同
代码示例：
<!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
多组动画
语法格式：
animation:
动画1,
动画2,
......
;
代码示例：
<!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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]