CSS2D转3D
# 字体图标的使用
SVG
常用的 iconfont 网站 阿里巴巴字体库、
# 平面转换
transition: all 0.5
- 改变盒子在平面内的形态 （ 位移、旋转、缩放 ）
- 2D 转换
# 位移
transform: translate(-100%,50%) 对元素相对于自身的位移函数 比较灵活的位移函数
利用这个函数可以生成位移效果
.son {
width: 200px;
height: 200px;
background-color: red;
transition: all 0.5s;
}
.father:hover .son {
transform: translate(100%,50%);
}
2
3
4
5
6
7
8
9
background-position: right 0
背景位置定位函数
# 旋转
transform: rotate(360deg) 对元素相对于自身的旋转函数 deg角度可以是正的也可以是负的
- 顺时针
- 逆时针
transform-origin 属性改变旋转圆点
- 默认圆点是盒子中心点
- transform-origin：原点水平位置 原点垂直位置
取值
- 方位名词 left、top、right、bottom、center
- 像素单位值
- 百分比 相对于盒子自身的尺寸计算
/* 复合写法 防止属性覆盖 */
div {
transition:all 1s;
}
div .son {
tranform: translate(100px) rotate(360deg);
}
2
3
4
5
6
7
# 缩放
transform: scale(x轴缩放倍数,y轴缩放倍数) 对元素相对于自身中心的缩放函数
div {
transition: all 1s;
}
div .son {
transform: scale(1.5);
}
2
3
4
5
6
注意
一般情况下，只为scale设置一个值，表示x轴和y轴的等比例缩放
在平面转换的操作时，需要注意 transform的覆盖问题
# 渐变
- 渐变是多个颜色逐渐变化的视觉效果
- 一般用于展示模块
background-image:linear-gradient { 颜色1,颜色2,颜色3... }
注意在实际应用中不会使用纯颜色渐变 采用透明到半透明会有好的视觉效果
background-image: linear-gradient (transparent,rgba(0,0,0,.5))
# 空间转换
# 空间位移
transform:translate3d(x,y,z)
- translateX
- translateY
- translateZ
注意
需要使用透视效果才能看到 z 轴的效果
perspective: 1000px
这个属性添加在父级容器上
透视距离也称为视距 ， 人眼到屏幕的距离模拟
# 空间旋转
transform: rotate(360deg)
- rotateX
- rotateY
- rotateZ
rotate3d(x,y,z) : 用来设置自定义旋转轴的位置和旋转角度 取值0-1
注意
需要使用 transform-style: preserve-3d 属性才能呈现3D立体效果
区别于3D位移的 perspective 属性
<head>
<style>
.cube {
width: 200px;
height: 200px;
margin: 100px auto;
transition:all 1s;
transform-style: preserve-3d
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
}
.front {
background-color: orange;
transform: translateZ(200px);
}
.back {
background-color: green;
}
.cube:hover {
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div class="cube">
<div class="front">
前面
</div>
<div class="back">
后面
</div>
</div>
</body>
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
36
See the Pen css-3d by yuandehua (@yuandehua) on CodePen.
# 空间缩放
transform: scaleX(n)
transform: scaleY(n)
transform: scaleZ(n)
# 动画
animation 添加动画效果
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
# 动画基本实现
定义动画
@keyframes 动画名称 {
from {}
to {}
}
or
@keyframes 动画名称 {
/* 占用动画的总时长 */
0%{}
10%{}
100%{}
}
2
3
4
5
6
7
8
9
10
11
使用动画
animation: 动画名称 动画实现时间
例：
.box {
width: 200px;
height: 200px;
background-color: pink;
animation: change 1s;
}
@keyframes change {
from {
width:200px;
}
to {
width:600px;
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
# 动画复合属性
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
速度曲线
linear : 匀速曲线
steps(n) : 分段动画
重复次数
infinite：无限次
动画方向
alternate：方向动画
执行完毕时状态
backwards：动画停留在初始的状态
forwards：动画停留在最
注意
复合写法必须写动画名称和时长
取值不分先后顺序 ，如果有两个时间值 第一个时间表示动画时长 第二个表示延迟时间
| 属性 | 作用 | 取值 |
|---|---|---|
| animation-name | 动画名称 | |
| animation-duration | 动画时长 | |
| animation-delay | 延迟时间 | |
| animation-fill-mode | 动画执行完毕状态 | forwards: 最后一帧状态 backwards: 第一帧状态 |
| animation-timing-function | 速度曲线 | steps(n)：逐帧动画 |
| animation-iteration-count | 重复次数 | infinite 无限循环 |
| animation-direction | 动画执行方向 | alternate 反方向 |
| animation-play-state | 暂停动画 | paused 暂停 |
# 多组动画
animation : {change 1s,move 1s;}