空间转换
3D 空间是从坐标轴角度去定义的，X轴，Y轴，Z轴构成了一个立体空间，Z轴 从屏幕到眼睛的方向为Z轴正方向，屏幕往后的为负方向
3D 近大远小 近清楚 远模糊
空间位移
属性：transform
取值：1.像素单位数值 2.百分比
.box:hover {
/* 让当前元素在悬停时 往右边的正方向去移动100px */
transfrom:translateX(100px);
/* 让当前元素在悬停时 往下边的正方向去移动100px */
transfrom:translateY(100px);
/* Z轴是视线方向，移动效果应该是距离的远或近，应用在屏幕里显示是放大或缩小的状态，默认情况下，无法观测到远近效果，需给父元素添加透视才可看到效果 */
transfrom:translateZ(100px);
/* 属性连写 X轴，Y轴，Z轴 */
transfrom:translate3d(100px,100px,100px);
}
透视
又名：视距，景深
所谓的视距就是人的眼睛到屏幕的距离
作用：进行空间转换时，为元素添加近大远小，近实远虚的视觉效果
属性：perspective
取值范围一般在 600-1200 像素单位数值
要给进行空间转换的元素的父元素添加
body {
perspective:600px;
}
空间旋转
左手法则：左手握住旋转轴，拇指指向正值方向，手指弯曲方向
.box:hover {
/* 围绕着中心点进行顺时针旋转 以我们人眼对屏幕的方向 */
transfrom:rotateZ(360deg)
/* 围绕着X轴方向进行旋转 以左手拇指指向正方向 其余手指弯曲的方向为正方向 反之负方向 */
transfrom:rotateX(360deg);
/* 围绕着Y轴方向进行旋转 以左手拇指指向正方向 其余手指弯曲的方向为正方向 反之负方向 */
transfrom:rotateY(360deg);
}
自定义轴线旋转
属性：transform
属性值：rotate3d(x轴，y轴，z轴，旋转的角度)
取值范围：0 - 1
body{
/* 给其父元素添加透视 让其看来立体一些，便于观察*/
perspective：600px;
}
.box：hover{
/* 在坐标系中，为X轴与Y轴划定位置，构成坐标，再去向原点进行连线 */
transform:rotate3d(1,1,0,60deg);
}
立体呈现
透视只能模拟出一个近大远小，近实远虚的视觉效果，并不能呈现一个元素的立体空间，我们要实现一个元素的立体空间必须要通过transform-style:preserve-3d来实现，使子元素处于真正的3D空间
属性：transform-style
属性值：preserve-3d
给要实现立体效果的元素的父元素添加
body {
/* 开启透视让结构有近大远小的效果 */
perspective: 800px;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: #0a0;
transition: 1s;
/* 开启3d立体环境 */
transform-style: preserve-3d;
}
.son {
width: 200px;
height: 200px;
background-color: orange;
/* 让橙色盒子沿着z轴，向人眼方向走200px */
transform: translateZ(200px);
}
/* 鼠标悬停box 让box沿着Y轴旋转200deg */
.box:hover {
transform: rotateY(200deg);
}
3D导航案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav {
width: 300px;
height: 40px;
margin: 50px auto;
background-color: #ccf;
text-align: center;
}
.nav li {
float: left;
width: 100px;
height: 40px;
line-height: 40px;
/* 1.添加3D旋转，开启上帝视角，以便在写代码的过程中可以看到立体盒子 便于调试 */
/* 5.完成导航模块的构建后，此时可以关闭上帝视角 */
/* transform:rotateX(-20deg) rotateY(30deg); */
/* 2.给变化盒子的直接父元素添加3D环境，这样可以看到页面中两个盒子的变化 */
transform-style:preserve-3d;
/* 7.因为两个盒子之间的变换是瞬间完成的，显得突兀，需要添加过渡来放缓这步操作，谁做变化给谁添加过渡 */
transition:.8s;
}
.nav a {
/* 3.添加绝对定位(不占位置)，将两个a标签叠放在一起 */
position:absolute;
display: block;
width: 100%;
height: 100%;
color: #fff;
}
.nav li a:first-child {
background-color: #0a0;
/* 让绿色的盒子往Z轴方向往前移动橙色盒子高度的一半，完成立方体的模块 */
transform:translateZ(20px);
}
.nav li a:last-child {
background-color: #ffa500;
/* 4.让橙色盒子能够扣住绿色的盒子，让其围绕着Y轴往上走自身高度的一半，再围绕X轴正方向旋转九十度 */
/* 为什么不让橙色盒子直接走完自身高度，再去进行旋转直接扣住？
因为旋转的起始位置在中心，如果直接走完自身高度再进行旋转，会让橙色盒子脱离开我们本希望它在的位置(紧贴绿色盒子的上方) */
transform:translateY(-20px) rotateX(90deg);
}
.nav li：hover {
/* 6.达成鼠标悬停可以看到两个盒子的变换效果 */
transfrom:rotateX(-90deg);
}
</style>
</head>
<body>
<div class="nav">
<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>
动画
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧 FPS:每秒传输帧数
.box {
/* 第二步 使用动画 */
animation:move 2s linear;
}
/* 第一步 定义动画 */
/* (第一种方法) */
@keyframes move {
/* 起始状态 */
form { }
/* 结束状态 */
to { }
}
/* (第二种方法)*/
@keyframes move {
/* 起始状态 */
0% { }
/* 执行到一半时候的状态 */
50% { }
/* 结束状态 */
100% { }
}
animation的相关属性：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
.box {
/* 动画连写属性没有顺序限制 */
/* 如果动画执行时间和延迟时间同时出现，写在前面的是执行时间，写在后面的是延迟时间 */
/* 速度曲线中的匀速 linear
播放次数中的 无限次播放 infinite
反向播放动画 alternate
动画停留在结束位置 forwards */
animation:move 2s linear 1s infinite alternate forwards;
/* 分开的写法，常进行单独书写的两个值
animation-delay：1s 动画延迟
animation-play-state:paused; 暂停动画，常配合：hover来进行使用*/
}
当边偏移想要参与过渡/动画效果一定要指定起始位置
逐帧动画
属性：animation-timing-function9(速度曲线)
取值：steps(图片的数量)
一般配合精灵图来实现，将多张有变化幅度的图片通过不间断播放来达成动画的效果
.box {
width: 200px;
height: 200px;
margin: 100px;
background-color: #0a0;
/* steps应用于将多张图片合成一张动画的效果 */
animation: move 2s steps(4);
}
@keyframes move {
to {
height: 600px;
}
}
