
Demo:
*to see the CSS & jQuery 3d Cube on the website click here.
What do you need to do?
To create the CSS & jQuery rotating cube follow the steps below:
- Add HTML
- Add CSS
- Add JavaScript/jQuery
Step1.
Add HTML
Each cube has 6 sides. We need to create them in HTML:
<div id="wrap">
<div id="D3Cube">
<div id="side1"></div>
<div id="side2"></div>
<div id="side3"></div>
<div id="side4"></div>
<div id="side5"></div>
<div id="side6"></div>
</div>
</div>
Step2.
Add CSS
body {
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(233,210,148,1) 100%);
height:100vh;
display:flex;
justify-content: center;
align-items: center;
}
#wrap {
position:relative;
}
#D3Cube {
position: relative;
width: 250px;
height: 250px;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
-moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
-webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#D3Cube > div {
position: absolute;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
width: 250px;
height: 250px;
float: left;
overflow: hidden;
opacity: 0.8;
}
#side1 {
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
-moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
-webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(125px);
background-color: #F9E79F;
}
#side2 {
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
-moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
-webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(125px);
background-color: #85C1E9;
}
#side3 {
transform: translateX(0px) translateY(0px) translateZ(125px);
-moz-transform: translateX(0px) translateY(0px) translateZ(125px);
-webkit-transform: translateX(0px) translateY(0px) translateZ(125px);
background-color: #F1948A;
}
#side4 {
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
-moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
-webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(125px);
background-color: #1ABC9C;
}
#side5 {
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
-moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
-webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(125px);
background-color: #8E44AD;
}
#side6 {
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
-moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
-webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(125px);
background-color: #D7DBDD;
}

Step3.
Add JavaScript/jQuery
$(document).mousemove(function(e) {
$('#3dCube').css('transform', 'rotateX(0deg) rotateY(0deg)');
var rotate_X;
var rotate_Y;
var invert = false;
if (invert) {
rotate_X = e.pageX;
rotate_Y = e.pageY;
} else if (!invert) {
rotate_X = e.pageX;
rotate_Y = -e.pageY;
}
$('#D3Cube').css('transform', 'rotateX(' + rotate_Y + 'deg) rotateY(' + rotate_X + 'deg)')
});
Enjoy coding!
Read also:
CSS/JS Eye Follows Mouse Cursor + Blink on Hover