Telegram Group Join Now
ADVERTISEMENT
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 |
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
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
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
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