<body>
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face top"></div>
<div class="face bottom"></div>
<div class="face left"></div>
<div class="face right"></div>
</div>
</body>
$size: 50vmin;
@mixin face($color, $tx: 0px, $ty: 0px, $tz: 0px, $rx: 0deg, $ry: 0deg) {
background-color: $color;
transform: translateX($tx) translateY($ty) translateZ($tz) rotateX($rx)
rotateY($ry);
}
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
height: 100vh;
overflow: hidden;
perspective: 1000px;
}
.cube {
transform-style: preserve-3d;
transform: rotateX(-25deg) rotateY(25deg);
position: absolute;
width: $size;
height: $size;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
.face {
box-sizing: border-box;
border: 5px solid white;
width: $size;
height: $size;
position: absolute;
top: 0;
left: 0;
&.front {
@include face($color: rgba(255, 192, 203, 0.5), $tz: $size / 2);
}
&.back {
@include face($color: rgba(135, 206, 235, 0.5), $tz: -$size / 2);
}
&.top {
@include face($color: rgba(0, 128, 0, 0.5), $ty: -$size / 2, $rx: 90deg);
}
&.bottom {
@include face($color: rgba(255, 255, 0, 0.5), $ty: $size / 2, $rx: 90deg);
}
&.left {
@include face($color: rgba(0, 0, 255, 0.5), $tx: -$size / 2, $ry: 90deg);
}
&.right {
@include face($color: rgba(255, 0, 0, 0.5), $tx: $size / 2, $ry: 90deg);
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.