<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>3D Cube</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="stage">
<div class="cube n1">
<div class="face front">FRONT</div>
<div class="face back">BACK</div>
<div class="face right">RIGHT</div>
<div class="face left">LEFT</div>
</div>
<div class="cube n2">
<div class="face front">FRONT</div>
<div class="face back">BACK</div>
<div class="face right">RIGHT</div>
<div class="face left">LEFT</div>
</div>
<div class="cube n3">
<div class="face front">FRONT</div>
<div class="face back">BACK</div>
<div class="face right">RIGHT</div>
<div class="face left">LEFT</div>
</div>
</div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/oieduardorabelo/3d-cube-kqpGH */
html, body {
height: 100%;
}
.stage {
position: relative;
min-height: 100%;
width: 100%;
-webkit-perspective: 1200;
display: -webkit-flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.cube {
/*position: absolute;*/
height: 200px;
width: 200px;
-webkit-transform-style: preserve-3d;
}
.cube.n1 {
left: 120px;
-webkit-transform: rotate3d(-1, 1, 1, -22deg);
}
.cube.n2 {
left: 360px;
-webkit-transform: rotate3d(-10, 5, 4, 71deg);
}
.cube.n3 {
left: 600px;
-webkit-transform: rotate3d(1, 2, 0, 180deg);
}
.face {
position: absolute;
width: inherit;
height: inherit;
opacity: .5;
}
.face.front {
background-color: blue;
-webkit-transform: translateZ(100px);
}
.face.left {
background-color: green;
-webkit-transform: translateX(100px) rotateY(90deg);
}
.face.right {
background-color: orange;
-webkit-transform: translateX(-100px) rotateY(-90deg);
}
.face.back {
background-color: purple;
-webkit-transform: translateZ(-100px) rotateY(180deg);
}