一、空间转换
空间:从坐标轴角度定义。x、y和z三条坐标轴构成一个立体空间,z轴位置与视线方向相同。
1. 空间位移
transform: translate3d(x,y,z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值(正负均可) (像素单位数值,百分比)
2. 透视
属性(添加给父级)
perspective: 值;
3. 空间旋转
transform: rotateX(值);
transform: rotateY(值);
transform: rotateZ(值);
- rotate3d(x,y,z,角度度数) :用来设置自定义旋转轴的位置即旋转的角度
- x,y,z 取值为0 - 1之间的数字
4. 立体呈现
步骤:
- 盒子父元素添加transform-style: preserve-3d ;
- 设置子盒子的位置(位移或旋转)
- 注:转换元素都有自己独立的坐标轴,互不干扰
案例:3D导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D导航</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
}
.navs {
width: 300px;
height: 40px;
margin: 50px auto;
}
.navs li {
position: relative;
float: left;
width: 100px;
height: 40px;
line-height: 40px;
transition: all .5s;
transform-style: preserve-3d;
/* 使在写代码中,能看到立方体 */
/* transform: rotateX(-20deg) rotateY(30deg); */
}
.navs li a {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
color: #fff;
}
.navs li a:first-child {
background-color: green;
transform: translateZ(20px);
}
.navs li a:last-child {
background-color: orange;
transform: rotateX(90deg) translateZ(20px);
}
.navs li:hover {
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="navs">
<ul>
<li>
<a href="#">首页</a>
<a href="#">Index</a>
</li>
<li>
<a href="#">登录</a>
<a href="#">Login</a>
</li>
<li>
<a href="#">注册</a>
<a href="#">Register</a>
</li>
</ul>
</div>
</body>
</html>
二、动画
1.动画的使用步骤
a) 定义动画
/* 完成两个状态之间的变化 */
@keyframes 动画名称 {
from {}
to {}
}
/* 完成多个状态之间的变化(百分比是动画总时长的占比) */
@keyframes 动画名称 {
0% {}
10% {}
15% {}
100% {}
}
b) 使用动画
animation: 动画名称 动画花费时长;
2.动画属性
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
注意:
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有2个时间值,第一个时间表示动画时长,第二个时间表示延迟时间
2.1 逐帧动画与补间动画
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵动画</title>
<style>
.box {
/* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
width: 140px;
height: 140px;
border: 1px solid #000;
background-image: url(./images/bg.png);
/* 12:精灵小图的个数 */
animation: move 1s steps(12) infinite;
}
@keyframes move {
form{
background-position: 0 0;
}
to {
/* 1680:精灵图的宽度 */
background-position: -1680px 0;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵动画</title>
<style>
.box {
position: absolute;
left: 0;
width: 140px;
height: 140px;
background-image: url(./images/bg.png);
animation:
move 1s steps(12) infinite,
run 5s forwards;
}
@keyframes move {
form {
background-position: 0 0;
}
to {
background-position: -1680px 0;
}
}
@keyframes run {
from {
transform: translateX(0);
}
to {
transform: translateX(800px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>