How to make 3D Rotating Image in CSS ?

22 Jun, 2021
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="https://media.geeksforgeeks.org/wp-content/uploads/20200723131445/img1-300x214.jpg">            </span>             <!-- adding CSS variable --i -->            <span style="--i:2;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131451/img2-300x150.jpeg">            </span>             <!-- adding CSS variable --i -->            <span style="--i:4;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131448/img3-200x200.jpg">            </span>             <!-- adding CSS variable --i -->            <span style="--i:5;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img4-300x167.png">            </span>             <!-- adding CSS variable --i -->            <span style="--i:6;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131449/img5-200x113.jpeg">            </span>             <!-- adding CSS variable --i -->            <span style="--i:7;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png" >            </span>             <!-- adding CSS variable --i -->            <span style="--i:8;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131446/img7-200x200.jpeg">            </span>             <!-- adding CSS variable --i -->            <span style="--i:9;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img8-200x133.jpeg">            </span>             <!-- adding CSS variable --i -->            <span style="--i:3;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131447/img9-200x200.jpeg">            </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="https://media.geeksforgeeks.org/wp-content/uploads/20200723131445/img1-300x214.jpg" />            </span>             <!-- Adding CSS variable --i -->            <span style="--i: 2;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131451/img2-300x150.jpeg" />            </span>             <!-- Adding CSS variable --i -->            <span style="--i: 4;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131448/img3-200x200.jpg" />            </span>             <!-- Adding CSS variable --i -->            <span style="--i: 5;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img4-300x167.png" />            </span>             <!-- Adding CSS variable --i -->            <span style="--i: 6;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131449/img5-200x113.jpeg" />            </span>             <!-- Adding CSS variable --i -->            <span style="--i: 7;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131450/img6-300x82.png" />            </span>             <!-- Adding CSS variable --i -->            <span style="--i: 8;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131446/img7-200x200.jpeg" />            </span>             <!-- Adding CSS variable --i -->            <span style="--i: 9;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131452/img8-200x133.jpeg" />            </span>             <!-- Adding CSS variable --i -->            <span style="--i: 3;">                <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200723131447/img9-200x200.jpeg" />            </span>        </div>    </body></html>
Output:  
 
rajeev0719singh
CSS-Advanced
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS