前端动画属性与性能优化详解.pptxVIP

css3动画

动画演示

1.相关属性介绍transform-style:flat|preserve-3d;transform-style与3d变换见:demo1注意：transform-style属性需要设置在父元素中,高于任何嵌套的变形元素设置了transform-style:preserve-3d的元素，就不能防止子元素溢出设置overflow：hidden；否则会导致preserve-3d失效

perspective——景深可以简单的把perspective理解成人距离显示器的距离此值越大的效果越差越小效果越好假设你距离100米和1米的距离去看一个边长一米的正方体重点记住perspective的值要大于3d物体的值其实也可以把perspective的值简单的理解为人的眼睛到显示器的距离，其实也可以把perspective的值简单的理解为人的眼睛到显示器的距离其实也可以把perspective的值简单的理解为人的眼睛到显示器的距离

perspective与translateZ()perspective:默认noneperspective-origin:默认值是50%50%

在3D变形中，除了perspective属性可以激活一个3D空间之外，在3D变形的函数中的perspective()也可以激活3D空间。他们不同的地方是:perspective用