ADVERTISEMENT

3D Rotating Carousel Using HTML,CSS and JavaScript

Telegram Group Join Now

ADVERTISEMENT

3D Rotating Carousel Using HTML,CSS and JavaScript

 

ADVERTISEMENT

3D Rotating Carousel Using HTML,CSS and JavaScript
3D Rotating Carousel Using HTML,CSS and JavaScript

ADVERTISEMENT

 

Welcome to The CodeWithRandom blog. In this blog, we learn how to create a 3D Rotating Carousel Using HTML, CSS, and JavaScript. We use HTML to create the basic structure and image insert and using CSS we style our 3D carousel. We add this Rotating functionality Through JavaScript in Carousel for this 3D Carousel.

ADVERTISEMENT

Code by hoangtran
Project Download Link Available Below
Language used HTML , CSS and JavaScript
External link / Dependencies No
Responsive Yes
3D Rotating Carousel Using Table

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

ADVERTISEMENT

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>

There is all the HTML Code for the 3D Rotating Carousel. Now, you can see output without Css and Javascript. Then we write Css and Javascript for the 3D Rotating Carousel.

50+ Html ,Css & Javascript Projects With Source Code

Only Html Code Output

ADVERTISEMENT

 
3D Rotating Carousel Using HTML,CSS and JavaScript
3D Rotating Carousel Using HTML Code Preview
 
3D Rotating Carousel Using HTML,CSS and JavaScript
3D Rotating Carousel Using HTML Code Preview

 

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);
}
}

Here Is Our Updated Output With Html And Css. By Using Css All Images Hide And As You See Below In Output Theres Black Backgournd Ready To Show Our 3d Rotating Carousel Using Javascript.

Portfolio Website using HTML and CSS (Source Code)

Only Html + Css Updated Output

ADVERTISEMENT

 
3D Rotating Carousel Using HTML,CSS and JavaScript
3D Rotating Carousel Using HTML,CSS Code Preveiw

Ground ready for Carousel

ADVERTISEMENT

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);
};

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

 
3D Rotating Carousel Using HTML,CSS and JavaScript
3D Rotating Carousel Using HTML,CSS and JavaScript

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

 

Now we have completed our 3D Rotating Carousel Using HTML, CSS, and JavaScript. Here is our updated output with Javascript Code. Hope you like the   3D Rotating Carousel. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

ADVERTISEMENT

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

Thank you!

ADVERTISEMENT

In this post, we learn how to create a 3D Rotating Carousel Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

ADVERTISEMENT

Written by – Code With Random/Anki

ADVERTISEMENT

Codepen by – hoangtran

Which code editor do you use for this 3D Rotating Carousel Using coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT