一、空间转换（3D转换）
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换
属性：transform
左手法则 ：
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
1.空间位移
语法 ： ransform: translate3d(x, y, z); transform: translateX(值); transform: translateY(值); transform: translateZ(值);
①默认情况下，为什么无法观察到Z轴位移效果？ ：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果
②生活中，同一个物体，观察距离不同，视觉上有什么区别？ ：近大远小、近清楚远模糊
2.透视效果（perspective）：近大远小，近清楚远模糊的效果
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
①.默认情况下，为什么无法观察到Z轴位移效果？ Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果
②.属性（添加给父级） perspective: 值; 取值：像素单位数值， 数值一般在800 – 1200。 作用 :空间转换时，为元素添加近大远小、近实远虚的视觉效果
3.呈现立体图形步骤 （transform-style: preserve-3d）
①盒子父元素添加transform-style: preserve-3d； 使子元素处于真正的3d空间
②按需求设置子盒子的位置（位移或旋转）
注意 ： 空间内，转换元素都有自已独立的坐标轴，互不干扰
立方体
思路： 1.制作大盒子.box包含6个小盒子 2.把div定位在大盒子.box上，此时会发生重叠，最后一个小盒子会在最前面 3.开始拆分6个盒子，位移到相应位置，再旋转方向。
<!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>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
position: relative;
width: 200px;
height: 200px;
/* background-color: #f3f3f3; */
margin: 100px auto;
/* 透明视距 */
/* perspective: 1000px; */
/* 给div的父级立体效果 让div立体 */
transform-style: preserve-3d;
transition: 1s;
cursor: pointer;
/* 用于观察立体效果，调试 */
transform: rotate3d(1,1,1, 0deg);
/* perspective-origin: 0px 0px; */
}
.box div {
/* 定位到父级box */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
/* 透明度，方便观察 */
opacity: 0.7;
}
/* 前面 */
.front {
background-color: pink;
/* 向z轴正移就是向前移100px */
transform: translateZ(100px);
}
/* 后面 */
.black {
background-color: skyblue;
/* 向z轴负移就是向里移-100px，再沿Y轴旋转180deg翻面 */
transform: translateZ(-100px) rotateY(180deg);
}
/* 左面 */
.left {
background-color: orange;
/* 向x轴负移就是向左移-100px，再旋转沿Y轴左旋转-90deg */
transform: translateX(-100px) rotateY(-90deg);
}
/* 右面 */
.right {
background: orchid;
/* 向x轴负移就是向右移100px，再旋转沿Y轴右旋转90deg */
transform: translateX(100px) rotateY(90deg);
}
/* 上面 */
.top {
/* 向Y轴负移就是向上移100px，再旋转沿X轴里旋转90deg */
background-color: palevioletred;
transform: translateY(-100px) rotateX(90deg);
}
/* 下面 */
.bottom {
background-color: blueviolet;
/* 向Y轴负移就是向下移100px，再旋转沿X轴外旋转-90deg */
transform: translateY(100px) rotateX(-90deg);
}
.box:hover {
transform: rotate3d(1,1,1, 360deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">前面</div>
<div class="black">后面</div>
<div class="left">左面</div>
<div class="right">右面</div>
<div class="top">上面</div>
<div class="bottom">下面</div>
</div>
</body>
</html>
2.空间旋转
语法 ： Ø transform: rotateZ(值); Ø transform: rotateX(值); Ø transform: rotateY(值);
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度 x，y，z 取值为0-1之间的数字
3.立体呈现（transform-style: preserve-3d）
使用perspective透视属性能否呈现立体图形？ ：不能，perspective只增加近大远小、近实远虚的视觉效果。
呈现立体图形步骤 ： ①盒子父元素添加transform-style: preserve-3d； ②按需求设置子盒子的位置（位移或旋转）
注意 Ø 空间内，转换元素都有自已独立的坐标轴，互不干扰
3.空间缩放
语法 transform: scaleX(倍数); transform: scaleY(倍数); transform: scaleZ(倍数); transform: scale3d(x, y, z);
二、动画
过渡可以实现什么效果？ ：实现2个状态间的变化过程 动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停） 实现步骤： 1、先定义动画 @keyframes 动画名称 { from {开始} to{结束} } 2、再去使用动画 animation:动画名称 动画花费时间（这两必写）
动画八个属性
animation：
1.namae (动画名称)
2.duration (播放时长)
3.timing-function(速度曲线)：
①linear (匀速) ②steps (逐帧动画) 4.deldy (动画延时时间)
5.iteration-count (动画播放次数) ①可以直接写数字 ②infinite (无限循环)
6.direction (动画方向) ①normal （默认值，先正再正） ②alternate (先正再反，常用)
7.fill-mode (动画执行完毕时状态) ①backword （延迟时间内第一帧的状态） ②forword (动画结束最后一帧的状态)
8.play-state (动画暂停/播放，常配合hover使用) ①running （默认值，播放） ②paused (暂停 )
