From the tutorial CSS Perspective property, we know now how to create 3d Cube. To make a Cube move/rotate we can add some JavaScript and jQuery.
To see the live output of the animation click here.
The cube is gonna move with the move of the mouse.
What do you need to do?
- Add HTML
- Add CSS
- Add JavaScript/jQuery
Step1.
Add HTML
Each cube has 6 sides. We need to create them in HMTL:
<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 {
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);
margin: auto;
position: relative;
-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)')
});
To see the live output of the animation go to lenastanley.com.
Enjoy coding!