HTML
<div class='container'>
<div class='rubiks-cube'>
<div class='cube-side side-front'>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
</div>
<div class='cube-side side-back'>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
</div>
<div class='cube-side side-right'>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
</div>
<div class='cube-side side-left'>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
</div>
<div class='cube-side side-top'>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
</div>
<div class='cube-side side-bottom'>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
<div class='cube-side-square'></div>
</div>
</div>
</div>
CSS
html, body {
width: 100%;
margin: 0;
overflow-x: hidden;
background: #140c20;
}
*, *:before, *:after {
box-sizing: border-box;
}
.container {
width: 200px;
height: 200px;
position: absolute;
-webkit-perspective: 700px;
perspective: 700px;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
.rubiks-cube {
position: absolute;
width: 100%;
height: 100%;
display: block;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease;
background: black;
}
.cube-side {
width: 100%;
height: 100%;
font-size: 0;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: black;
border-radius: 7px;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 1) {
background: #009b48;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 2) {
background: #b71234;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 3) {
background: #0046ad;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 4) {
background: #ff5800;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 5) {
background: #009b48;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 6) {
background: #cecece;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 7) {
background: #b71234;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 8) {
background: #b71234;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 9) {
background: #ffd500;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 10) {
background: #cecece;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 11) {
background: #b71234;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 12) {
background: #ffd500;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 13) {
background: #009b48;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 14) {
background: #ffd500;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 15) {
background: #cecece;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 16) {
background: #009b48;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 17) {
background: #cecece;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 18) {
background: #009b48;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 19) {
background: #ffd500;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 20) {
background: #009b48;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 21) {
background: #b71234;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 22) {
background: #ffd500;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 23) {
background: #ff5800;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 24) {
background: #cecece;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 25) {
background: #0046ad;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 26) {
background: #ff5800;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 27) {
background: #b71234;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 28) {
background: #ff5800;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 29) {
background: #ff5800;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 30) {
background: #009b48;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 31) {
background: #ffd500;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 32) {
background: #009b48;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 33) {
background: #cecece;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 34) {
background: #0046ad;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 35) {
background: #b71234;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 36) {
background: #b71234;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 37) {
background: #0046ad;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 38) {
background: #b71234;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 39) {
background: #009b48;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 40) {
background: #b71234;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 41) {
background: #0046ad;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 42) {
background: #ff5800;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 43) {
background: #0046ad;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 44) {
background: #ff5800;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 45) {
background: #009b48;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 46) {
background: #cecece;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 47) {
background: #ffd500;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 48) {
background: #ff5800;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 49) {
background: #ffd500;
}
.cube-side:nth-of-type(1) .cube-side-square:nth-of-type(6n
+ 50) {
background: #b71234;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 1) {
background: #009b48;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 2) {
background: #0046ad;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 3) {
background: #009b48;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 4) {
background: #ffd500;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 5) {
background: #0046ad;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 6) {
background: #ffd500;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 7) {
background: #009b48;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 8) {
background: #0046ad;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 9) {
background: #009b48;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 10) {
background: #ff5800;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 11) {
background: #ff5800;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 12) {
background: #b71234;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 13) {
background: #0046ad;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 14) {
background: #0046ad;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 15) {
background: #cecece;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 16) {
background: #ffd500;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 17) {
background: #ffd500;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 18) {
background: #cecece;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 19) {
background: #b71234;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 20) {
background: #ff5800;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 21) {
background: #ffd500;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 22) {
background: #cecece;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 23) {
background: #b71234;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 24) {
background: #cecece;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 25) {
background: #009b48;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 26) {
background: #0046ad;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 27) {
background: #cecece;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 28) {
background: #0046ad;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 29) {
background: #cecece;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 30) {
background: #b71234;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 31) {
background: #0046ad;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 32) {
background: #ffd500;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 33) {
background: #ff5800;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 34) {
background: #ff5800;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 35) {
background: #ff5800;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 36) {
background: #009b48;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 37) {
background: #009b48;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 38) {
background: #0046ad;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 39) {
background: #ffd500;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 40) {
background: #0046ad;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 41) {
background: #cecece;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 42) {
background: #009b48;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 43) {
background: #ffd500;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 44) {
background: #0046ad;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 45) {
background: #009b48;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 46) {
background: #0046ad;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 47) {
background: #009b48;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 48) {
background: #0046ad;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 49) {
background: #009b48;
}
.cube-side:nth-of-type(2) .cube-side-square:nth-of-type(6n
+ 50) {
background: #cecece;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 1) {
background: #0046ad;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 2) {
background: #009b48;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 3) {
background: #009b48;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 4) {
background: #ffd500;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 5) {
background: #cecece;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 6) {
background: #ff5800;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 7) {
background: #cecece;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 8) {
background: #0046ad;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 9) {
background: #b71234;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 10) {
background: #009b48;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 11) {
background: #ffd500;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 12) {
background: #009b48;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 13) {
background: #ffd500;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 14) {
background: #ff5800;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 15) {
background: #0046ad;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 16) {
background: #009b48;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 17) {
background: #b71234;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 18) {
background: #0046ad;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 19) {
background: #ffd500;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 20) {
background: #cecece;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 21) {
background: #0046ad;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 22) {
background: #0046ad;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 23) {
background: #b71234;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 24) {
background: #ff5800;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 25) {
background: #b71234;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 26) {
background: #cecece;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 27) {
background: #0046ad;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 28) {
background: #cecece;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 29) {
background: #b71234;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 30) {
background: #b71234;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 31) {
background: #0046ad;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 32) {
background: #009b48;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 33) {
background: #cecece;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 34) {
background: #cecece;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 35) {
background: #b71234;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 36) {
background: #009b48;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 37) {
background: #b71234;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 38) {
background: #ffd500;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 39) {
background: #ffd500;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 40) {
background: #0046ad;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 41) {
background: #ffd500;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 42) {
background: #009b48;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 43) {
background: #009b48;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 44) {
background: #b71234;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 45) {
background: #ffd500;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 46) {
background: #0046ad;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 47) {
background: #0046ad;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 48) {
background: #cecece;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 49) {
background: #009b48;
}
.cube-side:nth-of-type(3) .cube-side-square:nth-of-type(6n
+ 50) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 1) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 2) {
background: #cecece;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 3) {
background: #ff5800;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 4) {
background: #ffd500;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 5) {
background: #cecece;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 6) {
background: #0046ad;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 7) {
background: #cecece;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 8) {
background: #ffd500;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 9) {
background: #cecece;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 10) {
background: #b71234;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 11) {
background: #b71234;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 12) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 13) {
background: #ff5800;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 14) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 15) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 16) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 17) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 18) {
background: #ff5800;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 19) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 20) {
background: #ff5800;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 21) {
background: #ffd500;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 22) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 23) {
background: #0046ad;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 24) {
background: #0046ad;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 25) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 26) {
background: #ff5800;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 27) {
background: #0046ad;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 28) {
background: #ff5800;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 29) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 30) {
background: #0046ad;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 31) {
background: #b71234;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 32) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 33) {
background: #b71234;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 34) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 35) {
background: #0046ad;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 36) {
background: #0046ad;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 37) {
background: #009b48;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 38) {
background: #ff5800;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 39) {
background: #ffd500;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 40) {
background: #ff5800;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 41) {
background: #cecece;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 42) {
background: #ff5800;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 43) {
background: #ff5800;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 44) {
background: #b71234;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 45) {
background: #b71234;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 46) {
background: #0046ad;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 47) {
background: #cecece;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 48) {
background: #cecece;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 49) {
background: #ffd500;
}
.cube-side:nth-of-type(4) .cube-side-square:nth-of-type(6n
+ 50) {
background: #009b48;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 1) {
background: #0046ad;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 2) {
background: #b71234;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 3) {
background: #ffd500;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 4) {
background: #0046ad;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 5) {
background: #ffd500;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 6) {
background: #0046ad;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 7) {
background: #cecece;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 8) {
background: #b71234;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 9) {
background: #009b48;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 10) {
background: #0046ad;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 11) {
background: #b71234;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 12) {
background: #009b48;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 13) {
background: #b71234;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 14) {
background: #ffd500;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 15) {
background: #ffd500;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 16) {
background: #009b48;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 17) {
background: #009b48;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 18) {
background: #ffd500;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 19) {
background: #cecece;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 20) {
background: #ff5800;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 21) {
background: #ffd500;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 22) {
background: #009b48;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 23) {
background: #cecece;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 24) {
background: #cecece;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 25) {
background: #ffd500;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 26) {
background: #ff5800;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 27) {
background: #009b48;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 28) {
background: #cecece;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 29) {
background: #ffd500;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 30) {
background: #009b48;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 31) {
background: #b71234;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 32) {
background: #009b48;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 33) {
background: #b71234;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 34) {
background: #0046ad;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 35) {
background: #b71234;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 36) {
background: #b71234;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 37) {
background: #ff5800;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 38) {
background: #ff5800;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 39) {
background: #009b48;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 40) {
background: #cecece;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 41) {
background: #0046ad;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 42) {
background: #0046ad;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 43) {
background: #009b48;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 44) {
background: #0046ad;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 45) {
background: #ff5800;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 46) {
background: #b71234;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 47) {
background: #0046ad;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 48) {
background: #cecece;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 49) {
background: #ff5800;
}
.cube-side:nth-of-type(5) .cube-side-square:nth-of-type(6n
+ 50) {
background: #0046ad;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 1) {
background: #0046ad;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 2) {
background: #ff5800;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 3) {
background: #0046ad;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 4) {
background: #0046ad;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 5) {
background: #ffd500;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 6) {
background: #b71234;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 7) {
background: #0046ad;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 8) {
background: #ffd500;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 9) {
background: #009b48;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 10) {
background: #009b48;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 11) {
background: #ffd500;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 12) {
background: #b71234;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 13) {
background: #ffd500;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 14) {
background: #0046ad;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 15) {
background: #ffd500;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 16) {
background: #0046ad;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 17) {
background: #0046ad;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 18) {
background: #009b48;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 19) {
background: #009b48;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 20) {
background: #ff5800;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 21) {
background: #b71234;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 22) {
background: #009b48;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 23) {
background: #b71234;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 24) {
background: #ffd500;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 25) {
background: #009b48;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 26) {
background: #cecece;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 27) {
background: #b71234;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 28) {
background: #b71234;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 29) {
background: #cecece;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 30) {
background: #ffd500;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 31) {
background: #b71234;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 32) {
background: #0046ad;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 33) {
background: #ffd500;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 34) {
background: #cecece;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 35) {
background: #009b48;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 36) {
background: #ff5800;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 37) {
background: #0046ad;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 38) {
background: #009b48;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 39) {
background: #cecece;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 40) {
background: #b71234;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 41) {
background: #ffd500;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 42) {
background: #ffd500;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 43) {
background: #ffd500;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 44) {
background: #cecece;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 45) {
background: #0046ad;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 46) {
background: #cecece;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 47) {
background: #009b48;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 48) {
background: #0046ad;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 49) {
background: #ffd500;
}
.cube-side:nth-of-type(6) .cube-side-square:nth-of-type(6n
+ 50) {
background: #b71234;
}
.cube-side .cube-side-square {
display: inline-block;
border: 6px solid;
width: 33%;
height: 33%;
border-radius: 12px;
}
.cube-side.side-front {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
.cube-side.side-back {
-webkit-transform: rotateX(-180deg) translateZ(100px);
transform: rotateX(-180deg) translateZ(100px);
}
.cube-side.side-right {
-webkit-transform: rotateY(90deg) translateZ(100px);
transform: rotateY(90deg) translateZ(100px);
}
.cube-side.side-left {
-webkit-transform: rotateY(-90deg) translateZ(100px);
transform: rotateY(-90deg) translateZ(100px);
}
.cube-side.side-top {
-webkit-transform: rotateX(90deg) translateZ(100px);
transform: rotateX(90deg) translateZ(100px);
}
.cube-side.side-bottom {
-webkit-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}
.rubiks-cube {
-webkit-animation: rubiksCubeRotate 20s linear infinite both alternate;
animation: rubiksCubeRotate 20s linear infinite both alternate;
}
@-webkit-keyframes rubiksCubeRotate {
0% {
-webkit-transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
}
15% {
-webkit-transform: rotateZ(45deg) rotateX(45deg) rotateY(45deg);
transform: rotateZ(45deg) rotateX(45deg) rotateY(45deg);
}
30% {
-webkit-transform: rotateZ(45deg) rotateX(90deg) rotateY(90deg);
transform: rotateZ(45deg) rotateX(90deg) rotateY(90deg);
}
45% {
-webkit-transform: rotateZ(45deg) rotateX(135deg) rotateY(135deg);
transform: rotateZ(45deg) rotateX(135deg) rotateY(135deg);
}
60% {
-webkit-transform: rotateZ(45deg) rotateX(90deg) rotateY(180deg);
transform: rotateZ(45deg) rotateX(90deg) rotateY(180deg);
}
75% {
-webkit-transform: rotateZ(45deg) rotateX(45deg) rotateY(225deg);
transform: rotateZ(45deg) rotateX(45deg) rotateY(225deg);
}
100% {
-webkit-transform: rotateZ(45deg) rotateX(0deg) rotateY(270deg);
transform: rotateZ(45deg) rotateX(0deg) rotateY(270deg);
}
}
@keyframes rubiksCubeRotate {
0% {
-webkit-transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
}
15% {
-webkit-transform: rotateZ(45deg) rotateX(45deg) rotateY(45deg);
transform: rotateZ(45deg) rotateX(45deg) rotateY(45deg);
}
30% {
-webkit-transform: rotateZ(45deg) rotateX(90deg) rotateY(90deg);
transform: rotateZ(45deg) rotateX(90deg) rotateY(90deg);
}
45% {
-webkit-transform: rotateZ(45deg) rotateX(135deg) rotateY(135deg);
transform: rotateZ(45deg) rotateX(135deg) rotateY(135deg);
}
60% {
-webkit-transform: rotateZ(45deg) rotateX(90deg) rotateY(180deg);
transform: rotateZ(45deg) rotateX(90deg) rotateY(180deg);
}
75% {
-webkit-transform: rotateZ(45deg) rotateX(45deg) rotateY(225deg);
transform: rotateZ(45deg) rotateX(45deg) rotateY(225deg);
}
100% {
-webkit-transform: rotateZ(45deg) rotateX(0deg) rotateY(270deg);
transform: rotateZ(45deg) rotateX(0deg) rotateY(270deg);
}
}