3D Rotating Carousel Using HTML,CSS, and JavaScript

Coders, hello! The 3D rotating carousel that we’ll build in this article will rotate. We style our 3D carousel using CSS, while using HTML to build the basic framework and image inserts. With the help of JavaScript, we gave the 3D Carousel’s spinning feature which will automatically rotate the image in the 360 degree.

50+ HTML, CSS &JavaScript Projects With Source Code

Restaurant Website Using HTML and CSS

I hope you enjoy our blog so let’s start with a basic HTML structure for a 3D Rotating Carousel.

Html Code For 3D Rotating Carousel

<div id="drag-container">
<div id="spin-container">
<!-- Add your images (or video) here -->
<img src="https://images.pexels.com/photos/206395/pexels-photo-206395.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<img src="https://images.pexels.com/photos/1391498/pexels-photo-1391498.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<img src="https://images.pexels.com/photos/1382731/pexels-photo-1382731.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<img src="https://images.pexels.com/photos/1758144/pexels-photo-1758144.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<img src="https://images.pexels.com/photos/1382734/pexels-photo-1382734.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<img src="https://images.pexels.com/photos/1462636/pexels-photo-1462636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<div id="ground"></div>
</div>

First of all, we will create two containers using the div tag, one for the drag container and another for the spin container. Now, using the <img> tag, we will add the images inside our project; around six of the images we will add to make a slideshow structure.

We will also create another div tag with id “ground” for the auto-moving carousel.

There is all the HTML code for the 3D rotating carousel. Now, you can see output without CSS or Javascript. Then we write CSS and Javascript for the 3D rotating carousel.

 

Css Code For 3D Rotating Carousel

 * {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
/* for touch screen */
touch-action: none;
}
body {
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #111;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#drag-container, #spin-container {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-10deg);
transform: rotateX(-10deg);
}
#drag-container img, #drag-container video {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 200px;
font-size: 50px;
text-align: center;
-webkit-box-shadow: 0 0 8px #fff;
box-shadow: 0 0 8px #fff;
-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
}
#drag-container img:hover, #drag-container video:hover {
-webkit-box-shadow: 0 0 15px #fffd;
box-shadow: 0 0 15px #fffd;
-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
}
#drag-container p {
font-family: Serif;
position: absolute;
top: 100%;
left: 50%;
-webkit-transform: translate(-50%,-50%) rotateX(90deg);
transform: translate(-50%,-50%) rotateX(90deg);
color: #fff;
}
#ground {
width: 900px;
height: 900px;
position: absolute;
top: 100%;
left: 50%;
-webkit-transform: translate(-50%,-50%) rotateX(90deg);
transform: translate(-50%,-50%) rotateX(90deg);
background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);
}
#music-container {
position: absolute;
top: 0;
left: 0;
}
@-webkit-keyframes spin {
from{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
} to{
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes spin {
from{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
} to{
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@-webkit-keyframes spinRevert {
from{
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
} to{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}
@keyframes spinRevert {
from{
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
} to{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
}

Step1:Using the universal selector (*), we will set the padding and margin as “zero,” and using the body tag selector, we will set the height to 100%, and touch action is set to “none.”

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Using the body tag selector, we will set the overflow property as “hidden,” and the display is set to “flex.” The background property we will use is “black.”

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    /* for touch screen */
    touch-action: none;
}

body {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #111;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Step2:We will specify the position as “relative” using the position property and the tag selectors (#drag-container, #spin-container). The margin is set to “auto,” and the show is set to “flex.” With the aid of the transform property, we will spin the x-axis by -10 degrees. The image and movie will also receive a box shadow and a hover property.

#drag-container img,
#drag-container video {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 200px;
    font-size: 50px;
    text-align: center;
    -webkit-box-shadow: 0 0 8px #fff;
    box-shadow: 0 0 8px #fff;
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
}

#drag-container img:hover,
#drag-container video:hover {
    -webkit-box-shadow: 0 0 15px #fffd;
    box-shadow: 0 0 15px #fffd;
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
}

#drag-container p {
    font-family: Serif;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotateX(90deg);
    transform: translate(-50%, -50%) rotateX(90deg);
    color: #fff;
}

#ground {
    width: 900px;
    height: 900px;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotateX(90deg);
    transform: translate(-50%, -50%) rotateX(90deg);
    background: -webkit-radial-gradient(center center, farthest-side, #9993, transparent);
}

 

Ground ready for Carousel

JavaScript Code For 3D Rotating Carousel

// Author: Hoang Tran (https://www.facebook.com/profile.php?id=100004848287494)
// Github verson (1 file .html): https://github.com/HoangTran0410/3DCarousel/blob/master/index.html
// You can change global variables here:
var radius = 240; // how big of the radius
var autoRotate = true; // auto rotate or not
var rotateSpeed = -60; // unit: seconds/360 degrees
var imgWidth = 120; // width of images (unit: px)
var imgHeight = 170; // height of images (unit: px)
// Link of background music - set 'null' if you dont want to play background music
var bgMusicURL = 'https://api.soundcloud.com/tracks/143041228/stream?client_id=587aa2d384f7333a886010d5f52f302a';
var bgMusicControls = true; // Show UI music control
/*
NOTE:
+ imgWidth, imgHeight will work for video
+ if imgWidth, imgHeight too small, play/pause button in <video> will be hidden
+ Music link are taken from: https://hoangtran0410.github.io/Visualyze-design-your-own-/?theme=HauMaster&playlist=1&song=1&background=28
+ Custom from code in tiktok video https://www.facebook.com/J2TEAM.ManhTuan/videos/1353367338135935/
*/
// ===================== start =======================
// animation start after 1000 miliseconds
setTimeout(init, 1000);
var odrag = document.getElementById('drag-container');
var ospin = document.getElementById('spin-container');
var aImg = ospin.getElementsByTagName('img');
var aVid = ospin.getElementsByTagName('video');
var aEle = [...aImg, ...aVid]; // combine 2 arrays
// Size of images
ospin.style.width = imgWidth + "px";
ospin.style.height = imgHeight + "px";
// Size of ground - depend on radius
var ground = document.getElementById('ground');
ground.style.width = radius * 3 + "px";
ground.style.height = radius * 3 + "px";
function init(delayTime) {
for (var i = 0; i < aEle.length; i++) {
aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";
aEle[i].style.transition = "transform 1s";
aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";
}
}
function applyTranform(obj) {
// Constrain the angle of camera (between 0 and 180)
if(tY > 180) tY = 180;
if(tY < 0) tY = 0;
// Apply the angle
obj.style.transform = "rotateX(" + (-tY) + "deg) rotateY(" + (tX) + "deg)";
}
function playSpin(yes) {
ospin.style.animationPlayState = (yes?'running':'paused');
}
var sX, sY, nX, nY, desX = 0,
desY = 0,
tX = 0,
tY = 10;
// auto spin
if (autoRotate) {
var animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');
ospin.style.animation = `${animationName} ${Math.abs(rotateSpeed)}s infinite linear`;
}
// add background music
if (bgMusicURL) {
document.getElementById('music-container').innerHTML += `
<audio src="${bgMusicURL}" ${bgMusicControls? 'controls': ''} autoplay loop>
<p>If you are reading this, it is because your browser does not support the audio element.</p>
</audio>
`;
}
// setup events
document.onpointerdown = function (e) {
clearInterval(odrag.timer);
e = e || window.event;
var sX = e.clientX,
sY = e.clientY;
this.onpointermove = function (e) {
e = e || window.event;
var nX = e.clientX,
nY = e.clientY;
desX = nX - sX;
desY = nY - sY;
tX += desX * 0.1;
tY += desY * 0.1;
applyTranform(odrag);
sX = nX;
sY = nY;
};
this.onpointerup = function (e) {
odrag.timer = setInterval(function () {
desX *= 0.95;
desY *= 0.95;
tX += desX * 0.1;
tY += desY * 0.1;
applyTranform(odrag);
playSpin(false);
if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
clearInterval(odrag.timer);
playSpin(true);
}
}, 17);
this.onpointermove = this.onpointerup = null;
};
return false;
};
document.onmousewheel = function(e) {
e = e || window.event;
var d = e.wheelDelta / 20 || -e.detail;
radius += d;
init(1);
};

The radius, autorotate, rotate speed, image width, and image height will first be created as variables, and their values will be specified. After 1000 milliseconds, we’ll launch the slideshow using the set timeout method. The HTML components will then be chosen using document.getElementbyId. Both a drag-and-spin function and a loop in which the images revolve 360 degrees around the y-axis will be written.

10+ HTML CSS Projects For Beginners with Source Code

our project code is complete, now its time to see the final output.

Final Output Of 3D Rotating Carousel Using HTML,CSS and JavaScript

 

Video output:

Codepen Preview Of 3D Rotating Carousel Using HTML,CSS and JavaScript