3d效果及元素基点的改变

 perspective属性：景深（透视），属性值为透视点到元素的距离，近大远小；也可以让网页产生3D效果，单位像素；一般取值：800px-1000px

  perspective：800px 就是人离屏幕800px 的地方观看这个div元素。

  当translateZ的大小临近与800px时图片离我们越来越近了；当它大于800px时，这个图片就消失了。

  反之当translateZ为负值时，我们可以看到图片变小了，也就是图片离人越来越远了。

 transform: translateZ(z); 沿着z轴方向位移

 transform: translate3d(x,y,z) 沿着x、y、z轴方向位移

  z指的是 z 轴的向量位移长度。当其值为负值时，元素在 Z 轴越移越远，导致元素变小。反之当值为正值时，其在 Z 轴越移越近，导致元素变得较大。

创建3D空间：创建网页3d效果  当子元素和父元素都有3d变化的时候，给父元素设置 transform-style: preserve-3d;属性。

改变元素基点位置： 设置元素的基点位置，设置围绕哪个点进行变化

取值：百分比（参照自身计算）；px；关键字：水平：left center right； 垂直：top center bottom

说明：两个空格隔开的值，分别表示距离x,y轴的原点

当只有一个值时，另一个值默认center；可为负数； 必须与transform属性配合使用

位移不能改变元素基点