Image 3D Sliders using HTML AND CSS

In this article, you will learn how to create a 3D Image slider using HTML & CSS. Here when you click on the particular side image the main preview image will rotate with 3D visualization and show the particular clicked image. We have used the hover effect on the image click.

Hint: With the CSS transform property you can use 3D transformation methods:

  1. rotateX():  rotates an element around its X-axis at a given degree.
  2. rotateY(): rotates an element around its Y-axis at a given degree.
  3. rotateZ():  method rotates an element around its Z-axis at a given degree.

To create this, you need to create two files. One of them is an HTML file, and another one is a CSS file. Then copy the HTML and CSS code and paste it to the appropriate files and save them.

See also  SnowFall Animation Using HTML and CSS

HTML Code:

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css">
    <title>Image Sliders</title>
  </head>
  <body>
    <div class="center">
      <input type="radio" checked name="active" id="tab-1">
      <input type="radio" name="active" id="tab-2">
      <input type="radio" name="active" id="tab-3">
      <input type="radio" name="active" id="tab-4">
      <div class="sliders">
        <label for="tab-1"><img src="bg3.jpg"></label>
        <label for="tab-2"><img src="bg4.jpg"></label>
        <label for="tab-3"><img src="bg5.jpg"></label>
        <label for="tab-4"><img src="bg6.png"></label>
      </div>
<div class="img-card">
        <img src="bg3.jpg">
        <img src="bg4.jpg">
        <img src="bg5.jpg">
        <img src="bg6.png">
      </div>
</div>
</body>
</html>

CSS Code:

<!-- code by CodeitHub ( https://CodeitHub.com ) -->
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body{
    display: flex;
    height: 100vh;
    text-align: center;
    align-items: center;
    justify-content: center;
    background: linear-gradient(40deg,#ff6ec4,#7873f5)  
  }
  .center{
    position: relative;
    width: 770px;
    left: -70px;
    perspective: 1200px;
  }
  .center .img-card{
    position: relative;
    height: 350px;
    width: 400px;
    transform-style: preserve-3d;
    transition: transform .7s ease-in;
  }
  .img-card img{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border: 5px solid #fefefe;
  }
  .img-card img:nth-child(1){
    transform: rotateX(-270deg) translateY(-175px);
    transform-origin: top left;
  }
  .img-card img:nth-child(2){
    transform: translateZ(175px);
  }
  .img-card img:nth-child(3){
    transform: rotateX(-90deg) translateY(175px);
    transform-origin: bottom center;
  }
  .img-card img:nth-child(4){
    transform: rotateX(-180deg) translateY(350px) translateZ(175px);
    transform-origin: bottom right;
  }
  #tab-1:checked ~ .img-card{
    transform: rotateX(-90deg);
  }
  #tab-2:checked ~ .img-card{
    transform: rotateX(0deg);
  }
  #tab-3:checked ~ .img-card{
    transform: rotateX(90deg);
  }
  #tab-4:checked ~ .img-card{
    transform: rotateX(180deg);
  }
  .sliders{
    position: absolute;
    display: block;
    right: 0;
    top: -30px;
  }
  .sliders label{
    height: 98px;
    width: 110px;
    display: flex;
    overflow: hidden;
    cursor: pointer;
    margin: 6px 0;
    border: 5px solid #fefefe;
  }
  .sliders label:nth-child(1){
    margin-top: 0;
  }
  label img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: .9;
  }
  label img:hover,
  #tab-1:checked ~ .sliders label:nth-child(1) img,
  #tab-2:checked ~ .sliders label:nth-child(2) img,
  #tab-3:checked ~ .sliders label:nth-child(3) img,
  #tab-4:checked ~ .sliders label:nth-child(4) img{
    filter: grayscale(0);
    opacity: 1;
  }
  input{
    display: none;
  }

OUTPUT:

See also  Expanding Push Menu With Pure CSS

More Example:

Button using HTML and CSS

Responsive Price Table using HTML and CSS

Flip Card using HTML & CSS

Leave a Reply

Your email address will not be published. Required fields are marked *