从数学的角度上来说，我们是只有x轴和y轴的，而立体空间上则多了一个z轴，如下
x轴：垂直向右 右为正值，左为负值
y轴：垂直向下 下面为正值，上面为负值
z轴：垂直屏幕 往外为正，往内为负
3D主要用位移，旋转，透视和呈现
3D位移:
translate3d（x，y，z）
3D旋转:
rotate3d（x,y,z）
透视:
perspective
3D呈现:
transfrom-style
在css中，这种写法只能跟随一种轴:
transform:translateX（100px）;
transform:translateY（100px）;
transform:translateZ（100px）;
而它可以简写为：
transfrom:translate3d（x,z,y）
这个3d是必不可少的，且xyz轴是不能省略的，可以写0值
3D里面的透视简单理解就是近大远小，值越大，元素越大，但是透视很重要，想实现3d效果，就必须要加透视
3D旋转
使元素沿着xyz三个轴进行旋转
语法
transform:rotateX()
transform:rotateY()
transform:rotateZ()
3D呈现
transform-style:flat;默认不开启3d立体空间
transform-style:preserve-3d;子元素开启立体空间
这句代码是写给父元素，原来影响子元素的，很重要
如果要查看鼠标的坐标，可以参考w3school的实例，如下
<html>
<head>
</head>
<body onmousedown="show_coords(event)">
<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
</body>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</html>