使用css3實現一個立方體

<div class="box">
<div class="boxCorner1"></div>
<div class="boxCorner2"></div>
</div>

?

.box {
margin:4em auto;
width:10em;
height:10em;
transform-style:preserve-3d;
transform-origin:50% 50% -5em;
position:relative;
transform:rotateX(-45deg);
}

.box div {
position:absolute;
width:10em;
height:10em;
background-color:#4c4c4c;
transform-style:preserve-3d;
backface-visibility:hidden;
}

.boxCorner2 {
transform:rotateX(180deg) translateZ(10em);
}

.boxCorner1::before, .boxCorner1::after, .boxCorner2::before, .boxCorner2::after {
position:absolute;
content:'';
display:block;
width:100%;
height:100%;
transform-style:preserve-3d;
}

.boxCorner1::before, .boxCorner2::before {
transform:rotateY(90deg);
transform-origin:0 50%;
background-color:#444;
}

.boxCorner2::before {
transform-origin:100% 50%;
transform:rotateY(-90deg);
}

.boxCorner1::after, .boxCorner2::after {
transform:rotateX(-90deg);
transform-origin:50% 0;
background-color:#555;
}

?

轉載于:https://www.cnblogs.com/fyking/p/5233240.html

總結

以上是生活随笔為你收集整理的css3立方体实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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