CSS变形与动画(二):perspctive透视效果 与 preserve-3d 3d效果(奥运五环例子)

文章目录

    • perspective 3d透视效果
    • preserve-3d 3d嵌套效果
      • 例子 奥运五环
    • backface-visibility 背面效果

perspective 3d透视效果

perspective 指定了观察者与 z=0 平面的距离,使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大,而 z<0 时则比正常小,大小程度由该属性的值决定。

作用于在父级上。

preserve-3d 3d嵌套效果

相互可以视觉上 插入 和 覆盖
transform-style: preserve-3d; 也是用在父级

例子 奥运五环

通过每个环细微的旋转角度实现。
主要看各环之间的覆盖关系,这就是3d嵌套的效果。

CSS变形与动画(二):perspctive透视效果 与 preserve-3d 3d效果(奥运五环例子)_第1张图片




    
    
    Document
    


    
"mb">
"m">
"l">
"l">
"l">
"l">
"l">

backface-visibility 背面效果

backface-visibility: hidden; 背面不可见

你可能感兴趣的:(CSS,css,3d)