css3 动画

perspective

以下demo1-3都是两层结构，.container>.transformed, container上设置perspective

没有提供perspective值，三维变换在平面被挤压，见demo1

提供了perspective值，三维变换可以形成透视效果，见demo2

提供了perspective值，2个子元素的三维变换，见demo3

transform-style

只设置transform-style，不设置perspective，三维变换的子元素不能形成透视，在平面被挤压，见如下demo-s

以下demo4-5都是三层结构，.container>.transformed>.child, container上设置perspective, .transformed设置三维变换和preserve-3d, .child（红色）设置3d空间中的三维变换

没有设置preserve-3d

child不能形成3d变换

设置了preserve-3d，形成3d渲染上下文。

实战

把perspective和preserve-3d设置在同一个元素上,两层结构

把perspective和preserve-3d设置在不同元素上,三层结构