一、透视属性；定义虚拟眼睛，?perspective: ；
? ? ? ? 1.透视写到被观察元素的父盒子上面?
? ? ? ? 2.当透视值小于z值的时候，是什么都看不见的，
? ? ? ? 3. z值就是物体到屏幕的距离，
? ? ? ? 4.? 而透视，就是虚拟眼睛到屏幕的距离?
body {
perspective: 500px;
}???????
? ? ? 二、3D移动
??????? ?transform: translateX(100px) translateY(100px) translateZ(100px);
??????? ?1. translateZ 沿着Z轴移动
??????? ?2. translateZ 后面的单位我们一般跟px
??????? ?3. translateZ(100px) 向外移动100px （向我们的眼睛来移动的）
??????? ?4. 3D移动有简写的方法
??????? ?transform: translate3d(x,y,z);
??????? ?transform: translate3d(100px, 100px, 100px);
??????? ?5. xyz是不能省略的，如果没有就写0 ；
三、3D旋转
沿着x轴进行旋转，左手法则：大拇指指向X轴正方向，剩下四个手指微微弯曲，指向即是正值旋转方向
????????transform:?rotateX(180deg);?
沿着y轴旋转,左手法则?，大拇指指向y轴正方向，剩下四个手指即是正值旋转方向
????????transform:?rotateY(180deg);?
沿着 z轴的转向和2d的旋转效果基本一致，正值顺时针，负值逆时针?
????????transform:?rotateZ(180deg);?
合写?
?transform:?rotate3d(x,y,z,45deg); （一般不会合写）
沿着向量轴旋转
1和0就是表示矢量值?，当x为1，y为1，就是在x和y的中线进行旋转，即向量轴?
transform: rotate3d(1, 1, 0, 45deg);直线L即可看做是向量轴
? ? ??
?
四、开启元素3D立体效果
让子元素保持3d立体空间环境?，写在父元素，但是子元素生效
??transform-style的值：?flat默认不开启；preserve-3d开起立体空间
????
????transform-style:?preserve-3d;旋转木马案例?
思路：
把一个盒子看做整体，为其定义一个父盒子；
在子盒子内部放置6张图片，利用3D移动和旋转的效果，以及空间思维，先旋转再移动，让其6张图变为立体的效果；
因为是为图片开启立体效果，所以transform-style写在子盒子里面；
父盒子则放置透视，最后为子盒子整体定义并调用动画即可。
<body>
<section>
<img src="../img/99.jpg" alt="" />
<img src="../img/99.jpg" alt="" />
<img src="../img/99.jpg" alt="" />
<img src="../img/99.jpg" alt="" />
<img src="../img/99.jpg" alt="" />
<img src="../img/99.jpg" alt="" />
</section>
</body><style>
body {
perspective: 1200px;
background-color: #ccc;
}
section {
position: relative;
width: 300px;
height: 400px;
margin: 200px auto;
/* background-color: pink; */
transform-style: preserve-3d;
/* transition: all 3s; */
animation: move 6s linear infinite;
}
@keyframes move {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
section img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: skyblue;
background: url(img/99.jpg) no-repeat;
}
section img:nth-child(1) {
transform: translateZ(300px);
}
section img:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
}
section img:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
section img:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
section img:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
section img:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
</style>