CSS的圓角立方體(border-radius)是一種常見的3D效果,可以使一個矩形(或正方形)在三維空間中呈現出立方體的形狀。通過調整圓角的大小和立方體的透視效果(perspective),可以制作出多種不同的效果。
.box { width: 200px; height: 200px; background-color: #ddd; border-radius: 50px; transform: perspective(500px) rotateX(30deg) rotateY(45deg); }
這個例子展示了一個簡單的圓角立方體的實現方式。首先定義一個200x200像素的矩形,顏色為灰色。然后通過border-radius屬性將矩形的四個角都變成了圓形,圓角半徑為50像素。接著使用transform屬性將矩形旋轉了30度和45度,同時進行了透視變換,實現了立方體的效果。
.box { width: 200px; height: 200px; background-color: #ddd; border-radius: 50px; transform-style: preserve-3d; transform: perspective(500px) rotateX(30deg) rotateY(45deg); } .box:before { content: ""; position: absolute; top: -50px; left: 0; width: 200px; height: 50px; background-color: #bbb; transform: rotateX(90deg); border-top-left-radius: 50px; border-top-right-radius: 50px; } .box:after { content: ""; position: absolute; bottom: -50px; left: 0; width: 200px; height: 50px; background-color: #999; transform: rotateX(90deg); border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; }
這個例子展示了一個稍微復雜一些的圓角立方體的實現方式。和前面的例子一樣,首先定義一個200x200像素的灰色矩形,并將四個角設置為50像素的圓角。接著使用transform-style屬性設置立方體的樣式為preserve-3d,表示在3D空間中保持原有的形狀。然后定義:before和:after偽元素,用來分別創建立方體的頂部和底部。這兩個偽元素的樣式設置基本相同,都是一個50像素高的矩形,顏色不同,使用border-radius屬性設置圓角,使用rotateX(90deg)將矩形旋轉為與立方體垂直的狀態,從而形成立方體的頂部和底部。
下一篇vue手機視頻操作