3D carousel Html CSS JavaScript

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.

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

3D carousel Html CSS JavaScript

3D carousel:

How to create a 3D carousel in HTML, CSS, and javascript?

Download an editor:

Html source code:

CSS source code:

Javascript source code:

Download source code:

Summary and Task:

Post a Comment

Not for Kids: How to Assert Dominance

Main Tags

Contact Form