①
translateZ 属性是transform的子属性，它决定了元素沿着自身Z轴移动了多少像素。
如果只有这么一个属性，是看不出来任何效果的，因为浏览器没有办法计算应该产生什么样的变化，所以我们需要给父元素添加一条 perspective属性 ，此时，表示父元素距离屏幕多远
②
perspective：__px ： 景深：决定元素距离屏幕的像素值
③
transform-style：preserve-3d 该属性让子元素保留3d效果，要给父元素添加
④
scaleZ：缩放 一个元素只有宽度和高度，并没有厚度的概念，所以给一个元素添加scaleZ是没有意义的，给一个具有样式的立方体元素添加这个属性，可以影响子元素
总结 ：scaleZ对元素自身没有任何意义。对子元素有效果
⑤
backface-visibility:hidden ：图片的背面背景是不可见状态 默认是可见的，加上这个属性之后翻转180度之后现在会显示空白
⑥
transform-origin 决定改变旋转的中心位置，值有两个参数组成：可以用单词法，像素法，百分比法 left top 、 50px 50px 、 50% 50%left top 、 50px 50px 、 50% 50%
旋转中心：
transfrom-origin: 该属性决定元素的旋转中心位置
transfrom-origin: left top 元素的旋转中心位于左上方
transfrom-origin: 50px 50px 元素的旋转中心位于左上角往右50px的位置 往下50px的位置
transfrom-origin: 50% 50% 元素的旋转中心位于中心点
待会更新 css3 2D效果的知识点，可以关注我 ，查看日常更新新的前端知识