Skip to content
Related Articles

Related Articles

Improve Article
How to make 3D Rotating Image in CSS ?
  • Last Updated : 27 Oct, 2020

In this tutorial, we will be showing you how to create a 3D rotating image gallery using simple HTML and CSS-animation property.

Explanation:

In this article, we have used mainly CSS variable, CSS flex, object-fit, transform-style, animation, transform and keyframes properties to perform this task. To read more about CSS keyframes properties please refer to https://www.geeksforgeeks.org/css-animations/ article.

HTML: Creating structure




<!DOCTYPE html>
<html>
  
    <head>
        <link rel="stylesheet" href="app.css">
    </head>
  
    <body>
  
        <div class="box">
              
            <!-- adding CSS variable --i -->
            <span style="--i:1;">
                <img src=
            </span>
  
            <!-- adding CSS variable --i -->
            <span style="--i:2;">
                <img src=
            </span>
  
            <!-- adding CSS variable --i -->
            <span style="--i:4;">
                <img src=
            </span>
  
            <!-- adding CSS variable --i -->
            <span style="--i:5;">
                <img src=
            </span>
  
            <!-- adding CSS variable --i -->
            <span style="--i:6;">
                <img src=
            </span>
  
            <!-- adding CSS variable --i -->
            <span style="--i:7;">
                <img src=
            </span>
  
            <!-- adding CSS variable --i -->
            <span style="--i:8;">
                <img src=
            </span>
  
            <!-- adding CSS variable --i -->
            <span style="--i:9;">
                <img src=
            </span>
  
            <!-- adding CSS variable --i -->
            <span style="--i:3;">
                <img src=
            </span>
          
        </div>    
    </body>
  
</html>

CSS:




/* Applying Global CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
/* Centering the content of whole body */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}
  
/* Adding tranform-style CSS 
    property to the boxes */
.box {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: animate 20s linear infinite;
}
  
/* Adding keyframes for animation */
@keyframes animate {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}
  
/* Adding CSS to all the span 
    tags for animation */
.box span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: 
      rotateY(calc(var(--i) * 45deg)) translateZ(400px);
    -webkit-box-reflect:
below 0px linear-gradient(transparent, transparent, #0004);
}
  
/* Adding object-fit CSS property to all the images */
.box span img {
    position: absolute;
    top: 0;
    left: 0;
    height: 250px;
    width: 300px;
    object-fit: cover;
}

Final Solution:




<!DOCTYPE html>
<html>
    <head>
        <style>
            /* Applying Global CSS */
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
  
            /* Centering the content of whole body */
            body {
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                background: #000;
            }
  
            /* Adding tranform-style CSS 
               property to the boxes */
            .box {
                position: relative;
                width: 200px;
                height: 200px;
                transform-style: preserve-3d;
                animation: animate 20s linear infinite;
            }
  
            /* Adding keyframes for animation */
            @keyframes animate {
                0% {
                  transform: perspective(1000px) rotateY(0deg);
                }
                100% {
                 transform: perspective(1000px) rotateY(360deg);
                }
            }
  
            /* Adding CSS to all the span 
               tags for animation */
            .box span {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transform-origin: center;
                transform-style: preserve-3d;
                transform:
             rotateY(calc(var(--i) * 45deg)) translateZ(400px);
                -webkit-box-reflect: 
     below 0px linear-gradient(transparent, transparent, #0004);
            }
  
            /* Adding object-fit CSS 
          property to all the images */
            .box span img {
                position: absolute;
                top: 0;
                left: 0;
                height: 250px;
                width: 300px;
                object-fit: cover;
            }
        </style>
    </head>
  
    <body>
        <div class="box">
            <!-- Adding CSS variable --i -->
            <span style="--i: 1;">
                <img src=
            </span>
  
            <!-- Adding CSS variable --i -->
            <span style="--i: 2;">
                <img src=
            </span>
  
            <!-- Adding CSS variable --i -->
            <span style="--i: 4;">
                <img src=
            </span>
  
            <!-- Adding CSS variable --i -->
            <span style="--i: 5;">
                <img src=
            </span>
  
            <!-- Adding CSS variable --i -->
            <span style="--i: 6;">
                <img src=
            </span>
  
            <!-- Adding CSS variable --i -->
            <span style="--i: 7;">
                <img src=
            </span>
  
            <!-- Adding CSS variable --i -->
            <span style="--i: 8;">
                <img src=
            </span>
  
            <!-- Adding CSS variable --i -->
            <span style="--i: 9;">
                <img src=
            </span>
  
            <!-- Adding CSS variable --i -->
            <span style="--i: 3;">
                <img src=
            </span>
        </div>
    </body>
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :