css3立方体实现

Posted 2020-06-17

使用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;
}