看到了没有，这个出现空白是因为，当与你的视线是平行的时候，因为平面是没有厚度的所以你看到的就是空白
旋转方面的属性我们已经讲解了，接下来我们就来讲解一下，3D平移的属性，3D的平移属性分别有：translateX()、tanslateY()、tanslateZ()这三个方法
分别就是对应的是X、Y、Z轴方向上面的平移，这个具体参照上面的坐标图，很容易理解的，这个就不必在此多此一举了，以translateX()为例来讲解一下使用方法，如果是要使平面在X轴正方向上面移动45像素，这个时候可以这样写 translateX(45px)，其他的使用方法一样，接下来就结合一下上面所提到的一个坐标轴的相对位置问题来接一个例子，也作为translate这一系列属性的一个DEMO
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo1</title>
</head>
<style type="text/css">
#test{
height:200px;
width:200px;
position:absolute;
margin-top:100px;
margin-left:100px;
}
#test #div2{
height:200px;
width:200px;
background:lightcoral;
-webkit-transition: all .6s;
position:relative;
-webkit-transform:rotateX(-80deg) translateZ(200px);
}
#test:hover #div2{
-webkit-transform: rotateX(80deg);
}
</style>
<body>
<div id="test">
<div id="div2"></div>
</div>
</body>
</html>效果展示：
由于id=test定义的是margin-left等于margin-top的，但是由于div2中进行了移动的操作，造成了初始化页面红色矩形的margin-top>margin-left，但是细心的你有没有发现，参照上图的3D坐标轴，要使平移的应该是设置rotateY()才对，怎样这里是用过设置rotateZ()来实现的，哈哈，想看结果的请看下面分析
其实我们可以这样分析：
图像中应用了rotateX(-90deg)——也就是说明了图像目前是与我们的视线是平行的，从3D图中我们可以看出，Z轴总是与页面的关系是垂直关系，所以这个时候的Z轴就变成了变换之前的Y轴，所以变换后我们直接操作Z轴就可以起到操作Y轴的作用
三、3D知识点进阶
看到这里我默认读者都已经理解了上面的基础知识点了，毕竟上面的知识点还算是比较好上手的，接下来就是3D属性中一些比较难以理解的属性的讲解，这里会使用通俗的说法来进行说明、阐述观点，如有错误，希望各位同行指出
1、perspective
