立體呈現-第二十五天
阿新 • • 發佈：2022-05-06
立體呈現
目標:使用tranform-style:preserve-3d呈現立體圖形
-
呈現立體圖形步驟
- 盒子父元素新增transform-style:preserve-3d;
- 按需求設定子盒子的位置(位移或旋轉)
-
注意
- 空間內,轉換元素都有自己獨立的座標軸,互不干擾
實現正方體
<!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> .box{ width: 200px; height: 200px; position: relative; margin: 200px auto; /* 新增透視 */ perspective: 1000px; /* 保留子元素的三維變化效果 */ transform-style: preserve-3d; transform: rotate3d(1,1,0,-30deg); } .face{ width: 200px; height: 200px; position: absolute; left: 0; top: 0; background-color: rgba(255, 0, 0, 0.4); } .face:nth-of-type(1){ transform: translateZ(100px); } .face:nth-of-type(2){ transform: translateZ(-100px) rotateY(180deg); } .face:nth-of-type(3){ transform: translateX(-100px) rotateY(-90deg); } .face:nth-of-type(4){ transform: translateX(100px) rotateY(90deg); } .face:nth-of-type(5){ transform: translateY(-100px) rotateX(90deg); } .face:nth-of-type(6){ transform: translateY(100px) rotateX(-90deg); } </style> </head> <body> <div class="box"> <div class="face" style="background: green;">1</div> <div class="face" style="background: pink;">2</div> <div class="face" style="background: blue;">3</div> <div class="face" style="background: yellow;">4</div> <div class="face" style="background: white;">5</div> <div class="face" style="background: black;">6</div> </div> </body> </html>