當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css preserve-3d 使用

發布時間：2023/12/20 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 css preserve-3d 使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

transform-style 設置元素的子元素是位于 3D 空間中還是平面中。所以 transform-style 是應該加在父盒子上面的。
可以把擁有這個屬性的盒子想象成一個舞臺，里面的子元素都是演員，他們可以隨意表演，我們可以通過舞臺觀看

perspective 指定了觀察者與 z=0 平面的距離，可以想象是我們和舞臺的距離，如果我們離舞臺更近是不是看到的東西越少，東西越大呢，如果我們離舞臺越遠看到的越多，演員也隨之越小

只要開啟了 transform-style: preserve-3d, 舞臺也就是 3d 的，perspective 加不加無所謂的，它只是規定了我們和舞臺的距離

demo

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {width: 200px;margin: 0 auto;transform: rotateX(10deg);transform-style: preserve-3d;}.div {text-align: center;transform-style: preserve-3d;animation: test 5s linear infinite;transform-origin: 50% 50%;}.div-inner {width: 200px;height: 200px;border-radius: 50%;transform: rotateX(90deg);background: red;}@keyframes test {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}.text {transform: translateX(80px) translateY(20px) translateZ(-360px);z-index: 999;}</style></head><body><div style="position: relative"><div class="container"><div class="text" style="">sdfdsf</div><div class="div"><div class="div-inner">SDFSDF</div></div></div></div></body> </html>

總結

以上是生活随笔為你收集整理的css preserve-3d 使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

css
preserve

上一篇：基于树莓派的WireGuard安装配置与
下一篇： html点击按钮弹出悬浮窗_html弹窗