Using CSS3 to implement a cube
<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;
}
CSS3 Cube Implementation