<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;
transform: translateZ(-150px);
perspective: 0px;
perspective-origin: 50% 100px;
width: 100px;
transition: 1s;
margin: 20px;
flex-grow: 1;
}
.side {
width: 100px;
height: 100px;
background: deepskyblue;
border: 1px solid white;
transition: 1s;
}
/*.front {
transform: rotateY(0deg) translateZ(50px);
}
.back {
transform: rotateX(180deg) translateZ(50px);
}
.top {
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
transform: rotateX(-90deg) translateZ(50px);
}
.left {
transform: rotateY(-90deg) translateZ(50px);
}
.right {
transform: rotateY(90deg) translateZ(50px);
}
.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.