Rotating 3D Image Previewer Cube using CSS

Last Updated : 25 Feb, 2021

The 3D Rotating Image Previewer cube is an effect in which a set of images appear on the faces of a revolving 3D cube. This effect can be created using HTML and CSS.

Approach: The best way to animate HTML objects is by using CSS @keyframes and by setting transition state at different animation states.

HTML Code:

Create an HTML File (index.html).
Link the CSS file in HTML that provides all the animation’s effect to our HTML. It is placed inside <head> tag.
Create 6 <div> tags for each face of the cube and place your images on each face.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="cube"> 
  
        <!-- Creating 6 divs for each face of the cube -->
  
        <div class="box box1"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210223233400/gfg4.jpg"
                alt="image 1"> 
        </div> 
  
        <div class="box box2"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210223232947/gfg2.jpg"
                alt="image 2"> 
        </div> 
  
        <div class="box box3"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210223233400/gfg4.jpg"
                alt="image 3"> 
        </div> 
  
        <div class="box box4"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210223232947/gfg2.jpg"
                alt="image 4"> 
        </div> 
  
        <div class="box box5"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210223233046/gfg3.png"
                alt="image 5"> 
        </div> 
  
        <div class="box box6"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210223232853/gfg1.png"
                alt="image 6"> 
        </div> 
    </div> 
</body> 
  
</html>

CSS Code: The following is the content for the ‘style.css’ file used in the above HTML code. CSS is used to give different types of animations and effects to our HTML page so that it looks interactive to all users.

Create a body class to give general styling to the whole page.
Create ids and classes for each face of the cube to provide styling.
Use @keyframes to animate the HTML elements.

CSS

/* CSS for general styling */
body { 
    display: flex; 
    height: 100vh; 
    justify-content: center; 
    align-items: center; 
    background: #1e6f0a; 
} 
  
.cube { 
    width: 200px; 
    height: 200px; 
    position: relative; 
    transform-style: preserve-3d; 
    animation: rotate 10s linear infinite; 
} 
  
img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
} 
  
.box { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0.9; 
} 
  
/* Applying styles to each face */
.box1 { 
    transform: translateZ(100px); 
} 
  
.box2 { 
    transform: rotateY(90deg) translateX(100px); 
    transform-origin: right; 
} 
  
.box3 { 
    transform: rotateY(180deg) translateZ(100px); 
} 
  
.box4 { 
    transform: rotateY(-90deg) translateX(-100px); 
    transform-origin: left; 
} 
  
.box5 { 
    transform: rotateX(-90deg) translateY(-100px); 
    transform-origin: top; 
} 
  
.box6 { 
    transform: rotateX(90deg) translateY(100px); 
    transform-origin: bottom; 
} 
  
/* Animating the elements */
@keyframes rotate { 
    0%, 
    100% { 
        transform: rotate(0deg); 
    } 
    20% { 
        transform: rotateY(90deg) rotateZ(90deg); 
    } 
    40% { 
        transform: rotateY(180deg) rotateZ(-90deg); 
    } 
    60% { 
        transform: rotateY(270deg) rotateZ(90deg); 
    } 
    80% { 
        transform: rotateY(360deg) rotateZ(-90deg); 
    } 
}