写在前面 —— 过渡（transition)
一般配合事件使用，例如 hover事件，让盒子变化柔和一些，看起来更舒服。
语法
transition:属性 花费时间 延迟时间
| 属性 | 描述 |
|---|---|
| 属性 | 宽度高度，背景颜色，内外边距都可以，想要所有都过渡就写all,多个属性用逗号隔开 |
| 花费的时间 | 单位是s， |
| 运动曲线 | 可选，默认为ease |
| 开始时间 | 可选，设置延迟时间触发时间，单位s,默认为0 |
demo
<!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>
/* transition:要过度的属性 花费时间 运动曲线何时开始 */
div {
200px;
height: 100px;
background-color: skyblue;
transition: all 1s;
}
div:hover {
400px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
加了过度效果 —— 要慢一点
没加过度效果 —— 要快一点
一.CSS32D转换
2D转换是改变标签在二维二维平面上的的位置和形状。
1.移动（translate）
语法
/*一起写*/
transform: translate(x,y);
/*分开写*/
transform: translateX(N);
transform: translateY(M);
注释
可以是具体的单位，也可以是百分比（参照盒子自身的大小）
translate最大的优点是不会影响其他元素的位置（保留位置）
对行内标签没有效果
demo
<!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>
/* transition:要过度的属性 花费时间 运动曲线何时开始 */
div {
200px;
height: 100px;
background-color: skyblue;
transition: all 1s;
}
div:hover {
transform: translate(100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.旋转（rotate）
语法
transform: rotate(度数)
注释
rotate.单位为deg
角度为正时，顺时针转，为负时为逆时针
默认的旋转中心是元素的中心点
demo —— 旋转的小人
<!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 {
100px;
height: 100px;
border: 10px solid pink;
border-radius: 50%;
transition: all 1s;
}
img:hover {
transform: rotate(180deg);
}
</style>
</head>
<body>
<img src="../image.jpg" alt="">
</body>
</html>
demo —— 翻转的三角
<!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 {
padding: 5px 5px;
position: relative;
height: 20px;
200px;
border: solid 1px skyblue
}
.box::after {
content: "";
position: absolute;
top: 8px;
right: 15px;
height: 10px;
10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
}
/* 鼠标经过box.里面的伪元素进行旋转 */
.box:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
更改旋转的中心点
默认是以盒子中心为旋转点
语法
transform-origin: x y;
注释：
x和y的单位可以是像素或者方位名词（top bottom left right center）
demo
<!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 {
margin: 200px auto;
height: 200px;
200px;
border: solid 2px skyblue;
overflow: hidden;
}
.box::after {
content: "";
display: block;
height: 200px;
200px;
background-color:skyblue;
transition: all 1s;
transform-origin: left bottom;
transform: rotate(180deg);
}
.box:hover::after {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.缩放（scale）
语法
/*分别设置盒子宽度和高度的放大或者缩小倍速，中间用逗号隔开，不带单位*/
transform: scale(x,y)
/*等比例缩放*/
transform: scale(n)
/*
缩小： 数值为0.1 - 1
放大： 数值大于1
*/
注释：
缩放也可以设置中心点，默认为盒子中心。
demo
<!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 {
margin: 200px auto;
height: 200px;
200px;
background-color: skyblue;
transition: all 1s;
}
.box:hover {
transform: scale(0.1);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
二.CSS3动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变样式任意多的次数。动画分为创建和调用两部分。
语法
/* 定义动画 */
@keyframes 动画名称 {
/* 开始状态 */
0% {
100px;
}
/* 结束状态 */
100% {
200px;
}
}
注释
用时间比来规定发生变化的时间，或者用关键子“from"和”to“,等同于0%和100%。
也可以设置多个时间点
demo
<!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>
/* 定义动画 */
@keyframes move {
0% {
transform: translate(0,0);
}
25% {
transform: translate(200px,0);
}
50% {
transform: translate(200px,200px);
}
75% {
transform: translate(0,200px);
}
100% {
transform: translate(0,0);
}
}
div {
/* 调用动画的名称 */
animation-name: move ;
/* 动画的执行时间 */
animation-duration: 10s;
height: 100px;
100px;
background-color:skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
其他属性
| 值 | 描述 |
|---|---|
| animation-name | 要调用的动画名称（必须参数） |
| animation-duration | 完成动画所花费的时间，以秒或毫秒计。（必须参数） |
| animation-timing-function | 动画的速度曲线。 |
| animation-delay | 动画开始之前的延迟。 |
| animation-iteration-count | 动画应该播放的次数。 |
| animation-direction | 是否应该轮流反向播放动画。 |
三.CSS3 3D转换
1.三维坐标系
三维坐标系是指立体空间，立体空间由三个轴共同组成。
X轴 ：向右为正，向左为负
Y轴 ：向下为正，向上为负
Z轴 ：往外为正，往里面为负
2.3D移动(translate3d)
3D移动在2D移动的基础上多加了一个可以移动的方向（轴）。
语法
/* 分开写 */
transform:translateX(n);
transform:translateY(n);
transform:translateZ(n);
/* 综合写法 */
transform: translate3d(x,y,z);
注释：
一般以px为单位
写在要实现效果的元素上
3.视距（perspective）
想要在网页实现3D效果需要视距（透视）
视距也成为透视，指的的是人的眼睛到屏幕的距离。
视距越小（距离越小），感觉成像越大，视距大（距离越远），成像越小。
注释：
d ： 就是视距
Z：就是z轴，物体距离屏幕的距离，Z轴越大（正值）看到的物体就越大。
语法
perspective: 大小；
/*视距要写在要实现效果的父元素上*/
demo
<!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>
body {
perspective:200px;
}
div {
margin: 100px auto;
100px;
height: 100px;
background-color: skyblue;
transform: translate3d(0, 0, 100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果1 —— 通过更改视距来实现
效果2 —— 通过更改Z轴来实现
4.3D旋转（rotate3d）
（1）围绕X轴旋转
往上转动为正值
往下转动为负值
demo1
<!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>
body {
perspective: 300px;
}
div {
margin: 100px auto;
/* 分开写来 */
height: 100px;
100px;
background-color: skyblue;
transition: all 2s;}
div:hover {
/*负值往下转动*/
transform: rotateX(-45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（2）围绕Y轴旋转
往右为正
往左为负
demo2
/*在demo1的基础改动*/
/*rotateX改为rotateY*/
transform: rotateY(90deg);
（3）围绕Z轴旋转
往右为正
往左为负
dem3
/*在demo1的基础改动*/
/*rotateX改为rotateZ*/
transform: rotateZ(90deg);
5.3D呈现（transfrom-style）
transfrom-style控制子元素是否爱妻三维立体环境。
参数
| 参数 | 描述 |
|---|---|
| flat | 默认，不开启子元素3D空间 |
| preserve-3d | 开启子盒子立体空间 |
demo
<!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>
body {
perspective: 300px;
}
.box {
position: relative;
200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 3D呈现写在父盒子上，作用在子盒子上 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(360deg)
}
.box div {
position: absolute;
top: 0;
left: 0;
100%;
height: 100%;
background-color:skyblue;
}
.box div:last-child {
background-color:pink;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
demo——两面翻转的盒子
<!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>
body {
perspective: 300px;
}
.box {
position: relative;
200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 3D呈现写在父盒子上，作用在子盒子上 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
100%;
height: 100%;
border-radius: 50%;
color: black;
font-size: 30px;
text-align: center;
line-height: 200px;
}
.front {
background-color: skyblue;
}
.back {
transform: rotateY(180deg);
background-color: pink
}
</style>
</head>
<body>
<div class="box">
<div class="front">键盘敲烂</div>
<div class="back">工资过万</div>
</div>
</body>
</html>
参考和部分截图来自哔哩哔哩视频