个性化网站建设公司,淘宝官网网页版登录入口,网站制作文章,wordpress 小论坛文章目录 perspective 3d透视效果preserve-3d 3d嵌套效果例子 奥运五环 backface-visibility 背面效果 perspective 3d透视效果 perspective 指定了观察者与 z0 平面的距离#xff0c;使具有三维位置变换的元素产生透视效果。z0 的三维元素比正常大#xff0c;而 z0 … 文章目录 perspective 3d透视效果preserve-3d 3d嵌套效果例子 奥运五环 backface-visibility 背面效果 perspective 3d透视效果 perspective 指定了观察者与 z0 平面的距离使具有三维位置变换的元素产生透视效果。z0 的三维元素比正常大而 z0 时则比正常小大小程度由该属性的值决定。 作用于在父级上。
preserve-3d 3d嵌套效果
相互可以视觉上 插入 和 覆盖 transform-style: preserve-3d; 也是用在父级上
例子 奥运五环
通过每个环细微的旋转角度实现。 主要看各环之间的覆盖关系这就是3d嵌套的效果。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.mb{background: pink;height:600px;display: flex;justify-content: center;}.m{padding-top: 200px;width:360px;height: 200px;display: flex;flex-wrap: wrap;transform-style: preserve-3d;}.l{margin: 2px;}.l:nth-child(1){width:100px;height: 100px;border:7px solid blue;border-radius: 100%;transform: rotateX(-1deg) rotateY(-2deg);}.l:nth-child(2){width:100px;height: 100px;border:7px solid black;border-radius: 100%;transform: rotateX(-1deg) rotateY(-2deg);}.l:nth-child(3){width:100px;height: 100px;border:7px solid red;border-radius: 100%;transform: rotateX(-3deg) rotateY(-3deg);}.l:nth-child(4){width:100px;height: 100px;border:7px solid yellow;border-radius: 100%;position: relative;left:56px;bottom: 60px;transform: rotateX(0deg) rotateY(2deg);}.l:nth-child(5){width:100px;height: 100px;border:7px solid green;border-radius: 100%;position: relative;left:56px;bottom: 60px;transform: rotateX(2deg) rotateY(4deg);}/style
/head
bodydiv classmbdiv classmdiv classl/divdiv classl/divdiv classl/divdiv classl/divdiv classl/div/div/div
/body
/htmlbackface-visibility 背面效果
backface-visibility: hidden; 背面不可见
