HTML
<div class="container">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="cube impossible-left">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="cube impossible-right">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
SCSS
@import "compass/css3";
$dice-size: 75px;
$half-dice: $dice-size / 2;
$impossible-colour: #8bfc19;
$colours: ( #19fc19, #19fc8b, #19fcfc, #198bfc, #1974fc, #8b19fc, #fc19fc, #fc198b, #fc1919, #fc8b19, #fcfc19, $impossible-colour, #8bfc19);
html {
background: #efefef;
}
.container {
position: relative;
width: 400px;
height: 450px;
margin: 40px auto;
}
.cube {
position: absolute;
width: 75px;
height: 75px;
transform-style: preserve-3d;
top: 50px;
left: 50px;
transform: rotateX(-35deg) rotateY(-45deg)
}
.cube div {
position: absolute;
width: $dice-size;
height: $dice-size;
text-indent: 100%;
overflow: hidden;
}
.back {
transform: translateZ(-($half-dice)) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX($half-dice);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-($half-dice));
transform-origin: center left;
}
.top {
transform: rotateX(-90deg) translateY(-($half-dice));
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY($half-dice);
transform-origin: bottom center;
}
.front {
transform: rotateY(0) translateZ($half-dice);
}
.cube:first-child {
top: 50px;
z-index: 120;
}
.cube:nth-child(2) {
top: 120px;
z-index: 110;
}
.cube:nth-child(3) {
top: 190px;
z-index: 100;
}
.cube:nth-child(4) {
top: 260px;
z-index: 90;
}
.cube:nth-child(5) {
top: 330px;
z-index: 80;
}
.cube:nth-child(6) {
top: 295px;
left: 110px;
z-index: 70;
}
.cube:nth-child(7) {
top: 260px;
left: 170px;
z-index: 60;
}
.cube:nth-child(8) {
top: 225px;
left: 230px;
z-index: 50;
}
.cube:nth-child(9) {
top: 190px;
left: 290px;
z-index: 40;
}
.cube:nth-child(10) {
top: 155px;
left: 230px;
z-index: 30;
}
.cube:nth-child(11) {
top: 120px;
left: 170px;
z-index: 20;
}
.cube:nth-child(12) {
top: 85px;
left: 110px;
z-index: 140;
}
.cube:nth-child(13) {
top: 85px;
left: 110px;
z-index: 10;
}
@for $i from 0 to length($colours) {
.cube:nth-child(#{$i+1}) div {
background-color: nth($colours, $i+1);
}
.cube:nth-child(#{$i+1}) .right {
background-color: darken(nth($colours, $i+1), 20%);
}
.cube:nth-child(#{$i+1}) .front {
background-color: darken(nth($colours, $i+1), 12%);
}
}
.cube.impossible-left .back, .cube.impossible-left .right {
background: none;
}
.cube.impossible-left .top {
width: 0;
height: 0;
background: none;
border-top: $half-dice solid $impossible-colour;
border-right: $half-dice solid transparent;
border-left: $half-dice solid $impossible-colour;
border-bottom: $half-dice solid transparent;
}
.cube.impossible-left .bottom {
width: 0;
height: 0;
background: none;
border-top: $half-dice solid transparent;
border-right: $half-dice solid transparent;
border-left: $half-dice solid $impossible-colour;
border-bottom: $half-dice solid $impossible-colour;
}
