css3 实现3D交互效果必须掌握的知识点 笔记

①

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效果的知识点，可以关注我 ，查看日常更新新的前端知识