<div class = 'container'>
<div class="cube One">
<div class="side front"></div>
<div class="side back"></div>
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side left"></div>
<div class="side right"></div>
</div>
<!--<div class="cube Two">
<div class="side front"></div>
<div class="side back"></div>
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side left"></div>
<div class="side right"></div>
</div>
<div class="cube Three">
<div class="side front"></div>
<div class="side back"></div>
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side left"></div>
<div class="side right"></div>
</div>
<div class="cube Four">
<div class="side front"></div>
<div class="side back"></div>
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side left"></div>
<div class="side right"></div>
</div>
</div>
<div class="wrap">
<div class="cube Five">
<div class="side front"></div>
<div class="side back"></div>
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side left"></div>
<div class="side right"></div>
</div>
<div class="cube Six">
<div class="side front"></div>
<div class="side back"></div>
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side left"></div>
<div class="side right"></div>
</div>-->
</div>
body {
background: #1d1d1d;
}
.container {
display: flex;
padding: 0;
margin-top: 100px;
}
.cube {
transform-style: preserve-3d;
perspective: 1000px;
transform: rotateX(20deg) rotateY(-20deg);
width: 100px;
transition: 1s;
margin: 20px;
flex-grow: 1;
}
.side {
margin-left: 50px;
width: 100px;
height: 100px;
position: absolute;
transition: 1s;
opacity: .5;
}
/*.front {
transform: rotateY(0deg) translateZ(50px);
background: red;
border: 1px solid white;
}*/
.back {
transform: rotateX(180deg) translateZ(50px);
background: deepskyblue;
border: 1px solid white;
}
.top {
transform: rotateX(90deg) translateZ(50px);
background: purple;
border: 1px solid white;
}
.bottom {
transform: rotateX(-90deg) translateZ(50px);
background: blue;
border: 1px solid white;
opacity: 1;
}
.left {
transform: rotateY(-90deg) translateZ(50px);
background: green;
border: 1px solid white;
}
.right {
transform: rotateY(90deg) translateZ(50px);
background: yellow;
border: 1px solid white;
}
/*.turnleft {
transform: rotateY(-90deg);
}
.turnright {
transform: rotateY(90deg);
}
.turnup {
transform: rotateX(90deg);
}
.turndown {
transform: rotateX(-90deg);
}*/
/*var safeColors = ['00','22','44','99','cc','ff'];
var rand = function() {
return Math.floor(Math.random()*6);
};
var randomColor = function() {
var r = safeColors[rand()];
var g = safeColors[rand()];
var b = safeColors[rand()];
return "#"+r+g+b;
};
var movements = ['turnleft', 'turnright', 'turnup', 'turndown'];
var randMov = function() {
return Math.floor(Math.random()*4);
};
var randomSpin = function() {
var move = movements[randMov()];
return move;
};
$(document).ready(function() {
$('.cube').mouseover(function() {
//$(this).addClass('spin');
$(this).find('.side').css('background',randomColor());
$(this).addClass(randomSpin());
});
$('.cube').mouseout(function() {
$(this).removeClass(randomSpin());
});
});*/
This Pen doesn't use any external CSS resources.