一、序
博主最近这些天，突发奇想的想研究一下CSS3的东西，从而提升一下CSS的能力，在学习的过程中发现其实CSS3是一个挺复杂的东西，深入的研究，你可能会涉及到初中的光学理论来帮助理解一些概念，同时如matrix可能还需要你用大学学习的矩阵来进行分析，因为这是本系列的第一篇文章，所以就从最好玩的开始介绍起，这样也不至于让大家失去了阅读下去的兴趣，同时写这些文章的一个主要的原因是，CSS3挺复杂的，一方面整理一下自己的研究，方便日后重新的翻看，另一方面，也想帮助更多的读者而来进入CSS3这个世界，提高读者们的见识，不要像博主以前一样，以为会了几个标签就好像CSS3的东西都会了一样。
二、3D基础概念理解
如果要说是3D的基础概念，那么有一些属性的理解是一定绕不过去的，首先我们就来谈一谈rotateX()、rotateY()、rotateZ()这几个属性
rotateX()、rotateY()、rotateZ()
rotateX():对应的是3D模型中的X轴上的旋转，传入的参数如:rotateX(45deg)表示的是页面绕X轴顺时针旋转45度
rotateX():对应的是3D模型中的Y轴上的旋转，传入的参数如:rotateY(45deg)表示的是页面绕Y轴顺时针旋转45度
rotateX():对应的是3D模型中的Z轴上的旋转，传入的参数如:rotateZ(45deg)表示的是页面绕Z轴顺时针旋转45度
对应的模型如下：
注：以上模型图的视角是+Z轴指向读者的方向
说到这里还需要注意这几个问题，就是页面(图中的菱形表示的就是页面)与坐标轴的位置是相对位置，不是绝对位置，也就是说页面位置一改变，坐标轴的位置也随着页面一起改变，这个你现在可能还不是很理解这个说法的作用，但是不用着急，如果弄个例子的话，例子会涉及到另外的一个属性的使用，所以先在这里买一个关子。二、旋转到与视线对其的方向的时候会出现消失的现象
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 div{
height:200px;
width:200px;
background:lightblue;
-webkit-transition: all .6s; }
#test div:hover{
-webkit-transform:rotateX(90deg);
}
</style>
<body>
<div id="test">
<div></div>
</div>
</body>
</html>
效果展示：
