平面转换

简介

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

平移

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

平移实现定位居中：

  • 方法一：margin
1
2
3
4
5
6
7
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
width: 200px;
height: 100px;
  • 方法二：平移 → 百分比参照盒子自身尺寸计算结果
1
2
3
4
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

双开门案例：

1
2
3
4
5
<!--HTML-->
<div class="father">
	<div class="left"></div>
	<div class="right"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*CSS*/
* {
	margin: 0;
	padding: 0;
}
.father {
	display: flex;
	margin: 0 auto;
	width: 1366px;
	height: 600px;
	background-image: url(bg.jpg);
	overflow: hidden;
}
.father .left,
.father .right {
	width: 50%;
	height: 600px;
	background-image: url(fm.jpg);
	transition: all 0.5s;
}
.father .right {
	background-position: right 0;
}
.father:hover .left {
	transform: translate(-100%);
}
.father:hover .right {
	transform: translate(100%);
}

旋转

1
transform: rotate(旋转角度);
  • 取值：角度单位是 deg
  • 技巧
    • 取值正负均可
    • 取值为正，顺时针旋转
    • 取值为负，逆时针旋转

转换原点：

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

1
transform-origin: 水平原点位置 垂直原点位置;

取值：

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

多重转换

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

1
transform: translate() rotate(); /*translate为平移，rotate为旋转
  • 多重转换原理：以第一种转换方式坐标轴为准转换形态
    • 旋转会改变网页元素的坐标轴向
    • 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

可以实现轮胎效果

缩放

1
2
transform: scale(缩放倍数);
transform: scale(X轴缩放倍数, Y轴缩放倍数);
  • 技巧
    • 通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
    • 取值大于1表示放大，取值小于1表示缩小

可以实现鼠标放置时放大的效果

倾斜

1
transform: skew();

取值：角度度数 deg

渐变

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

  • 线性渐变
    1681358603090.png
  • 径向渐变
    1681358608036.png

线性渐变

1
2
3
4
5
6
background-image: linear-gradient(
  to 渐变方向,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

取值：

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

径向渐变

给按钮添加高光效果

1
2
3
4
5
6
background-image: radial-gradient(
  半径 at 圆心位置,
  颜色1 终点位置,
  颜色2 终点位置,
  ......
);

取值：

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

空间转换

简介

  • 空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。
  • 空间转换也叫 3D转换
  • 属性：transform

1681723381377.png

平移

1
2
3
4
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();
  • 取值（正负均可）
    • 取值与平面转换相同
  • 默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果

视距

作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚
属性：(添加给父级，取值范围 800-1200)

1
perspective: 视距;

1681723504103.png

旋转

  • Z 轴：rotateZ()
    1681723547079.png

  • X 轴：rotateX()
    1681723568598.png

  • Y 轴：rotateY()
    1681723587974.png

旋转：左手法则：

作用：根据旋转方向确定取值正负
使用：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向

1681723629410.png

rotate3d-了解：

  • rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
  • x，y，z 取值为0-1之间的数字

案例-翻转导航栏：

CSS部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.nav ul {
	display: flex;
	list-style: none;
}
.nav li {
	position: relative;/*相对定位*/
	width: 100px;
	height: 40px;
	line-height: 40px;
	transition: all 0.5s;/*添加过渡*/
	transform-style: preserve-3d;/*设置为3D转换*/
}
.nav li a {
	position: absolute;/*绝对定位*/
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	text-decoration: none;/*去除字体划线*/
	color: #fff;
}
/* 立方体每个面都有独立的坐标轴，互不影响，各自移动避免交叉 */
.nav li a:first-child {
	background-color: green;
	transform: translateZ(20px);  /*前页向前移*/
}
.nav li a:last-child {
	background-color: orange;
	transform: rotateX(90deg) translateZ(20px);/*后页翻转并向上移动*/
}
.nav li:hover {
	transform: rotateX(-90deg);/*鼠标触动后页翻转*/
}

HTML部分：

1
2
3
4
5
6
7
8
9
10
11
12
<div class="nav">
	<ul>
		<li>
			<a href="#">首页</a>
			<a href="#">index</a>
		</li>
		<li>
			<a href="#">分类</a>
			<a href="#">category</a>
		</li>
	</ul>
</div>

1681723827660.png

缩放

1
2
3
4
transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

动画

animation

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

动画实现步骤

  1. 定义动画
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 方式一：只有两个状态 */
@keyframes 动画名称 {
  from {}
  to {}
}

/* 方式二：可以设置多个状态 */
@keyframes 动画名称 {
  0% {}
  10% {}
  ......
  100% {}
}
  1. 使用动画
1
animation: 动画名称 动画花费时长;

复合属性

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

提示：

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

属性拆分写法

1681724035890.png

案例-跑马灯

image.png

CSS部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.box {/*跑马灯外框*/
	width: 480px;
	height: 120px;
	border: 3px solid #000;
	margin: 50px auto;
	overflow: hidden;
}
.box img {/*图片样式，宽度设定为刚好放入*/
	width: 160px;
	display: block;
}
.box ul {
	display: flex; /*将列表设置为弹性盒子*/
	animation: imgMove 8s infinite linear; /*设置动画，infinite为循环播放，linear为匀速*/
}
/*定义动画*/
@keyframes imgMove {
	0% {
		transform: translate(0);
	}
	100% {
		transform: translate(-800px);/*设置为整个图片宽度之和*/
	}
}
.box:hover ul {
	animation-play-state: paused;/*设置鼠标悬停暂停*/
}

HTML部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="box">
	<ul>
		<li><img src="car1.png"></li>
		<li><img src="car2.png"></li>
		<li><img src="car3.png"></li>
		<li><img src="car4.png"></li>
		<li><img src="car5.png"></li>
		<!--设置结尾三张重复前三张的图，用于循环时衔接-->
		<li><img src="car1.png"></li>
		<li><img src="car2.png"></li>
		<li><img src="car3.png"></li>
	</ul>
</div>

精灵动画

1681724175321.png

核心原理：

  1. steps()逐帧动画
  2. CSS精灵图
  • 制作步骤：
    1. 准备显示区域
    • 盒子尺寸与一张精灵小图尺寸相同
    1. 定义动画
    • 移动背景图（移动距离 = 精灵图宽度）
    1. 使用动画
    • steps(N)，N与精灵小图个数相同
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div {
  width: 140px;
  height: 140px;
  border: 1px solid #000;
  background-image: url(./images/bg.png);
  animation: run 1s steps(12) infinite;
}

@keyframes run {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1680px 0;
  }
}

多组动画

1
2
3
4
5
animation: 
  动画一,
  动画二,
  ... ...
;