一.空间（3D）转换
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果。
属性：transform
（1）位移效果（Z轴方向需要配合perspective透视使用）
空间位移的目标：使用translate实现元素空间位移效果
语法transform: translate3d(x, y, z);transform: translateX(值);transform: translateY(值);transform: translateZ(值);
取值（正负均可） 像素单位数值或百分比
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>空间位移</title><style>body{perspective: 100px;}.box {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all .5s;}.box:hover {transform: translate3d(50px, 100px, 20px);transform: translate3d(50px, 100px, -20px);/* transform: translateX(500px); *//* transform: translateY(500px); *//* transform: translateZ(500px); */}</style></head><body><div class="box"></div></body></html>
（2）透视效果
目标：使用perspective属性实现透视效果 ~~~~加给父级元素
实现近大远小、近实远虚的视觉效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>透视效果</title><style>body {/* 加到父级元素，这里 */perspective: 1000px;/* perspective: 200px; *//* perspective: 10000px; */}.box {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover{/*正值是向我移动，会出现近大的效果*/transform: translateZ(200px);/*负值是远离我移动，会出现远小的效果*//* transform: translateZ(-200px); */}</style></head><body><div class="box"></div></body></html>
（3）空间旋转
目标：使用rotate实现元素空间旋转效果
语法 ：
transform:rotateZ(值);
transform:rotateX(值);
transform:rotateY(值)
Z轴—绕中心点旋转
代码<!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>空间旋转-Z轴</title><style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box img:hover {transform: rotateZ(360deg);}</style></head><body><div class="box"><img src="./images/hero.jpeg" alt=""></div></body></html>
X轴—以水平线为轴，绕水平线转
<style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box {/* 透视效果：近大远小，近实远虚 */perspective: 1000px;}.box img:hover {transform: rotateX(60deg);transform: rotateX(-60deg);}</style>
Y轴—以垂直线为轴，绕垂直线转
<style>.box {width: 300px;margin: 100px auto;}img {width: 300px;transition: all 2s;}.box {/* 透视效果：近大远小，近实远虚 */perspective: 1000px;}.box img:hover {transform: rotateY(60deg);transform: rotateY(-60deg);}</style>
查看效果：
（4）立体呈现
目标：使用transform-style: preserve-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>立体呈现</title><style>.cube {子绝父相position: relative;width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 2s;transform-style: preserve-3d;}.cube div {子绝父相position: absolute; left: 0;top: 0;width: 200px;height: 200px;}.front {background-color: orange;/* 向我走近200px *//* 让一个靠近我，一个不靠近，就会实现两个面之间的距离感 */transform: translateZ(200px);}.back {background-color: green;}/* cube hover 为了看空间感效果，鼠标放上去后 都绕Y轴转120度 */.cube:hover {transform: rotateY(120deg);}</style></head><body><div class="cube"><div class="front">前面</div><div class="back">后面</div></div></body></html>
二.3D导航
该过程代码块/* ①先子绝父相 将两个页面都放在前面重合，橙色会显示在前面 */.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;/* ④按它的坐标轴，将平面前移20px */transform: translateZ(20px);} .navs li a:last-child {background-color: orange;/* ②使用rotateX(90deg)将橙色绕X轴旋转90度，竖着变平 *//* ③使用translateZ(20px)将平着的页面沿Z轴上移20px */transform: rotateX(90deg) translateZ(20px) ;}
/* li:hover 立方体旋转 */.navs li:hover {transform: rotateX(-90deg);}
完整的代码块
<!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); *//* 测试缩放效果 *//* transform: scale3d(0.5, 1.1, 2); */}/* ①先子绝父相 将两个页面都放在前面重合，橙色会显示在前面 */.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;/* ④按它的坐标轴，将平面前移20px */transform: translateZ(20px);} .navs li a:last-child {background-color: orange;/* ②使用rotateX(90deg)将橙色绕X轴旋转90度，竖着变平 *//* ③使用translateZ(20px)将平着的页面沿Z轴上移20px */transform: rotateX(90deg) translateZ(20px) ;}/* li:hover 立方体旋转 */.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>
三.3D缩放
/* 测试缩放效果 在上面的3D导航中可查看缩放效果*/transform: scale3d(0.5, 1.1, 2);
