As Html, CSS and javascript are used to create the front end of the websites and we have created a 3D carousel in HTML, CSS, and javascript. The pictures are rotating in a circle form and it looks pretty much awesome. In the last post, we discussed How to create a calculator in Html, CSS and Javascript. Now, let us focus on 3D carousel development in HTML, CSS, and javascript.
3D carousel:
We have taken some pictures. After that, we need to rotate them in a circle. As you can see in the above image we have built a 3D rotating carousel for images. This carousel is built using frontend languages (Html, CSS, and Javascript). The images need to be in rotation. To provide a proper rotation of carousel images we have used CSS and JS. The design of this carousel is done in CSS while rotation of the images is done in javascript.
You might like it:
- 30-Second Countdown Timer JavaScript
- Free Price Range Slider in JavaScript
- Shuffle cards using CSS and javascript
It is done using javascript libraries. Javascript helps us to add dynamic properties to our static page like the motion of images in a constant time.
We can see the images from both sides of the frame.
All you need to learn is how to use Html, CSS, and javascript languages for the development of such projects. If you want to learn how to create this type of rotating 3D carousel in HTML, CSS, and javascript then follow this tutorial till the end.
How to create a 3D carousel in HTML, CSS, and javascript?
We will create a carousel in HTML, CSS, and javascript. You have to follow the below steps to create this carousel in these languages.
Download an editor:
If you want to create this type of carousel then download a code editor for yourself. It will help you a lot to write the code easily without facing any syntax errors. It has a lot of other positive factors. So, you have to download a code editor for professional work.
Html source code:
Html is the basic thing for the development of this project(carousel). So, we will be taking help from HTML tags. As HTML has a specific tag for importing the images.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>3D carousel - FantacyDesigns</title> <link rel="stylesheet" href="style.css"> <!-- Vendor Script --> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> </head> <body> <div id="drag-container"> <div id="spin-container"> <!-- Add your images (or video) here --> <img src="https://images.unsplash.com/photo-1508852951744-beab078a4b2b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Ym95fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt=""> <img src="https://images.unsplash.com/photo-1488161628813-04466f872be2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGJveXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt=""> <img src="https://images.unsplash.com/photo-1482849737880-498de71dda8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGJveXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt=""> <img src="https://images.unsplash.com/photo-1627135345338-a2024b1aea9d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Ym95JTIwcG9zZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt=""> <img src="https://images.unsplash.com/photo-1546427660-eb346c344ba5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGJveSUyMHBvc2V8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt=""> <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8aHVtYW58ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt=""> <!-- Example image with link --> <a target="_blank" href="https://images.pexels.com/photos/139829/pexels-photo-139829.jpeg"> <img src="https://images.pexels.com/photos/139829/pexels-photo-139829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> </a> <!-- Example add video --> <video controls autoplay="autoplay" loop> <source src="https://player.vimeo.com/external/322244668.sd.mp4?s=338c48ac2dfcb1d4c0689968b5baf94eee6ca0c1&profile_id=165&oauth2_token_id=57447761" type="video/mp4"> </video> <!-- Text at center of ground --> <p>3D Carousel</p> </div> <div id="ground"></div> </div> <div id="music-container"></div> </body> </html> </body> </html> |
CSS source code:
The picture’s alignment and its specific size are done using CSS properties. The background color of this carousel is also created using CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
* { 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); } } |
Javascript source code:
Javascript has a lot of libraries and it is known as a dynamic programming language. For better results of this carousel, we have used js libraries for rotation purposes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<script> // 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 // ===================== 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); }; </script> |
Note: create files of HTML, CSS, and javascript in your code editor. Then saves these files with the extension of .html, .css and .js in a single folder. After that copy the code of HTML, CSS, and javascript and paste them inside the files.
Download source code:
Source code is very necessary for some people because we are here for educational purposes. Download the source code file from the below button. It has all the files and images of this project. You just need to download the file and everything will be there in front of you.
Summary and Task:
I hope you have got the idea that how to build this 3D carousel. Now I am assigning you some tasks related to this carousel. You have to change the rotation speed of this carouse. Place images of irregular sizes. Change the image rotation from a clockwise to an anti-clockwise direction.
If you have any questions then comment below related to this 3D carousel.
Thanks for reading this article.
Download Source CodeClick to Download
