CSS3如何实现2D转换和3D转换,他们有何区别
CSS3中2D3D技术的发展,带来了更丰富的视觉效果~他们的实现机理是怎样的呢?
1定义
2D:
能够对元素进行移动,缩放,转动,拉长或拉伸。
3D:
允许对元素进行格式化,在三维空间进行操作。元素改变形状,尺寸和位置。
2D方法:
matrix()方法把所有2D转换方法组合在一起,该方法需要六个参数,包含数学函数,可以实现旋转(angle),缩放(n),移动(x,y),倾斜(x-angle,y-angle)。
3D方法:
3Dtransform方法
浏览器支持:
2D:
IE10,Firefox,Opera支持,Chrome和Safari需要前缀-webkit-,IE9需要前缀-ms.
3D:
IE10,Firefox,Chrome和Safari需要前缀-webkit-,Opera不支持。
区别:
3D除了增添了少许2D没有的属性外,其他基本上是细化了2D的属性。
欢迎关注微信公众号:“花栗鼠的红松树”
知乎专栏:“花栗鼠的红松树”
知乎: 卓怡 https://www.zhihu.com/people/zhuoyisun/activities