由于3D是立体三维，在x、y轴的基础上一般会多出一个z轴，深入跃出轴。
要使用transform实现3D效果，首先需要为该元素或该元素的直接父元素设置如下2个属性属性
1、transform-style 该属性是指定嵌套元素如何在3D空间中呈现
属性值： flat 默认值，表示所有子元素在2D平面呈现
preserve-3d 表示子元素在3D空间呈现
2、perspective 该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而
投放到一个2D平面上。
属性值： none 默认值，表示无限的角度来看3D物体，但看上去是平的
长度值 接受一个长度单位大于0的值，其单位不能为百分比。值越大，角
度出现的越远，3D物体越小，直至3D原有的大小
以上两个属性的示例如下：
eg. p{
perspective:1000px;
transform-style:preserve-3d;
}
注意：上面的两个值设置在该元素，或该元素的直接父元素中，显示的效果是不一样的。
一、translate3d(x,y,z) 必须写三个参数，且这三个参数可以为负值
eg. img{
transform:translate3d(100px,100px,300px);
}
还可以直接写translateZ(),这样默认x和y轴的值为0
eg. img{
transform:translateZ(-300px);
}
二、scale3d(x,y,z) 3D缩放，单独设置无效，需要配合角度
eg. img{
transform:scale3d(1,1,1.5) rotateX(45deg);
}
scaleZ(z) 单独设置z轴，x和y轴默认为1
eg. img{
transform:scaleZ(1.5) rotateX(45deg);
}
三、rotate3d(x,y,z,a) 设置3D旋转，a表示角度，xyz是0或1之间的数值
eg. img{
transform:rotate3d(1,0,0,45deg);
}
rotateX(a)、rotateY(a)、rotateZ(a) 单独设置3D旋转，可以分开写，也可写在一起
eg. img{
//transform:rotateX(45deg);
transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);
}
perspective-origin 改变3D元素变形的基准点，默认是元素的中心位置，如果改变了基准点。
它就会按照这个基准点进行变形。
属性值可以使用关键字，也可以使用百分数和具体值
关键字如下：
1、指定x轴的位置 left、center、right
2、指定y轴的位置 top、center、bottom
eg. p{
perspective-origin:left top;
perspective-origin:0px 0px;
perspective-origin:0% 0%;
}
注意：transform和transform-origin要求的版本比较高，所以除了标准的，最好写上带前缀的。
