白龙网认为，空间转换，也叫3D转换，通过X/Y/Z轴三个方向改变盒子的位移、旋转、绽放等形态，Z轴与视频的方向相同，正值指向自己。属性亦然是transform。
（1）位移
位移有可以分3种（X/Y/Z）独立的写法，也可以以复合属性的形式去写。
A.存在已经知盒子，给盒子初值过度效果，然后在HOVER中添加水平、垂直、Z轴效果即可。
<style>
body {
perspective: 1000px;
}
div {
margin: 300px auto;
width: 200px;
height: 200px;
background-color:red;
transition: all 5s;
}
div:hover {
/* transform: translate3d(100px,200px,300px); */
/* transform: translateX(100px); */
/* transform: translateY(200px); */
transform: translateZ(300px);
transform: translateZ(-300px);
}
</style>
</head>
<body>
<div></div>
</body>
B.透视效果（近大远小）
要想实现Z轴近大无小透视的效果，必须给元素的父标签添加一个perspective属性，属性值建议800-1200px之间。
如果perspcetive的属性值透视距不在800-1200px之间，则透视效果可能会太大，或者变化不太大，与违生活常识，不合理。
（2）旋转
A.基本用法
旋转有两种写法，一是分别单独写X/Y/Z两个轴的旋转角度；二是复合复合属性值X,Y.Z写在一起，再加上角度即可，属性值的聚会满园是0~1之间。
有目标盒子，选中盒子分别给X/Y/Y轴旋转角度即可。不管哪个轴转，顺时针为正值，逆时针为负值。
<style>
body {
perspective: 1000px;
}
img {
width: 200px;
height: 200px;
transition: all 3s;
}
img:hover {
transform: rotateX(60deg);
transform: rotate(-60deg);
transform: rotateY(360deg);
transform: rotateY(-360deg);
transform: rotateZ(360deg);
transform: rotateZ(-360deg);
transform: rotate3d(1,1,0.5,360deg);
}
</style>
</head>
<body>
<img src="./rotate.jpg" alt="">
</body>
B.立体效果
transform-style: preserve-3d的作用上让子元素产生3D效果，因此该属性用在父元素当中；默认情况下flat是平面效果。
立体图形旋转的一般思路，布局好盒子之后，首先，要在父元素中打开3D开关（transform-style: preserve-3d;）；然后给前面一个子元素一个沿着Z轴的位移（transform: translateZ(200px); 最后确保鼠标经过父元素时盒子有过度的旋转效果（transform: rotateY(360deg);），因此这个时候，需要再给父元素一个过度的属性。
a.案例1：背景图片切换
<style>
* {
margin: 0;
padding: 0;
}
.cube {
transform-style: preserve-3d;
margin: 0 auto;
width: 200px;
height: 200px;
position: relative;
transition: all 2s;
}
.cube div {
width: 200px;
height: 200px;
}
.front {
position: absolute;
left: 0;
top: 0;
background-color:orange;
transform: translateZ(200px);
}
.back {
background-color:green;
}
.cube:hover {
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div class="cube">
<div class="front"></div>
<div class="back"></div>
</div>
</body>
b.案例2：立体导航菜单
立体导航的实现，宏观上说，布局盒子、构建立体图这两步即可实现。布局盒子，就是要弄清楚功能需要的几个标签与结构。构建立体图时，首先要把父元素上打开3D开关，设置过度效果，同时，添加一个沿X/Y轴轻微旋转的测试立体效果，让调试过程具有可见性；其次是对子元素旋转、位移的操作；最后给父元素一个鼠标经过的旋转效果即可模拟实现。
<style>
* {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
a {
text-decoration: none;
}
.nav {
margin: 0 auto;
width: 300px;
height: 40px;
}
.nav li {
float: left;
width: 100px;
height: 40px;
transform-style: preserve-3d;
transition: all 2s;
/* 测试旋转，方便查看3D效果 */
/* transform: rotateX(-20deg) rotateY(30deg); */
}
.nav li a {
display: block;
width: 100%;
height: 100%;
text-align: center;
line-height: 40px;
color: #fff;
}
.nav li a:first-child {
background-color:green;
transform: translateZ(20px);
}
.nav li a:last-child {
background-color:orange;
transform: rotateX(90deg) translateZ(40px);
}
.nav li:hover {
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">首页</a>
<a href="">Home</a>
</li>
<li>
<a href="">首页</a>
<a href="">Home</a>
</li>
<li>
<a href="" class="top">首页</a>
<a href="" class="front">Home</a>
</li>
</ul>
</div>
</body>
（3）缩放
绽放也有两种写法，一是单独写X/Y/Z轴的绽放比例，二是写一个复合属性，同时控制X,Y,Z三个方向的效果。
transform: scale3d(0.9,1.5,3);
transform: scaleX(2);
transform: scaleY(3);
transform: scaleZ(4);