Open In App

How to make 3D Rotating Image in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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

 

html




<!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: 
 

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 transform-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: 
 

css




<!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 transform-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: 
 

 



Last Updated : 22 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads