4.3/5 - (3 votes)

In the realm of web design, animations play a crucial role in enhancing user experience and engagement. Today, we’re diving into a fascinating CSS example that demonstrates how to create a 3D cube with a hover animation. This cube spins and tilts when interacted with, adding a dynamic visual effect to your webpage. Let’s break down the code and explore how each part contributes to this interactive element.

Table of Contents

HTML Structure

Here’s the basic HTML structure for our animated 3D cube:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3d cube hover animation</title>
</head>
<body>
    <p> hover the cursor on the cube</p>
    <div id="cube-container">
        <div class="face top"></div>
        <div class="face right"></div>
        <div class="face bottom"></div>
        <div class="face left"></div>
        <div class="face back"></div>
        <div class="face front"></div>
    </div>
</body>
</html>

This simple HTML structure sets up a container for the cube and six faces (top, right, bottom, left, back, front) that make up the cube.

CSS Styling

Now let’s explore the CSS that brings the cube to life:

body {
    margin: unset;
    height: 100vh;
    background:#171a1b;
    color:white;
    font-family:"DIN Alternate";
    text-align:center;
}

#cube-container {
    box-sizing: border-box;
    transform-style: preserve-3d;
    top: 50%;
    left: 50%;
    position: relative;
    width: 250px;
    height: 250px;
    transition: 2s cubic-bezier(.68,-0.55,.27,1.55);
    transform: translate(-50%, -50%);
}

.face {
    width: 250px;
    height: 250px;
    position: absolute;
    border: 2px solid #ed3403;
    background:#ed340370;
    box-shadow: 0px 0px 150px #ed3403;
}

.top {
    transform: rotateX(90deg);
    margin-top: -50%;
}

.right {
    transform: rotateY(90deg);
    margin-left: 50%;
}

.left {
    transform: rotateY(-90deg);
    margin-left: -50%;
}

.bottom {
    transform: rotateX(90deg);
    margin-top: 50%;
}

.back {
    transform: translateZ(125px);
}

.front {
    transform: translateZ(-125px);
}

#cube-container:hover {
    transform: rotateX(-25deg) rotateY(-40deg) translate(-50%, -50%);
    transition: 2s cubic-bezier(.68,-0.55,.27,1.55);
}

Detailed Breakdown

Body Styling:

body {
    margin: unset;
    height: 100vh;
    background:#171a1b;
    color:white;
    font-family:"DIN Alternate";
    text-align:center;
}

The body is styled to center the content and give a dark background with white text for contrast. This sets a dramatic backdrop that enhances the visibility of the 3D cube.

2. Cube Container:

#cube-container {
    box-sizing: border-box;
    transform-style: preserve-3d;
    top: 50%;
    left: 50%;
    position: relative;
    width: 250px;
    height: 250px;
    transition: 2s cubic-bezier(.68,-0.55,.27,1.55);
    transform: translate(-50%, -50%);
}

The #cube-container holds all six faces of the cube. The transform-style: preserve-3d; property is crucial as it ensures that the 3D transformations of child elements (the faces) are preserved. The transition property controls the smoothness of the animation effect.

3. Cube Faces:

.face {
    width: 250px;
    height: 250px;
    position: absolute;
    border: 2px solid #ed3403;
    background:#ed340370;
    box-shadow: 0px 0px 150px #ed3403;
}

Each .face class styles the six faces of the cube. They are positioned absolutely to stack on top of each other within the container.

4. Positioning the Faces:

.top { transform: rotateX(90deg); margin-top: -50%; }
.right { transform: rotateY(90deg); margin-left: 50%; }
.left { transform: rotateY(-90deg); margin-left: -50%; }
.bottom { transform: rotateX(90deg); margin-top: 50%; }
.back { transform: translateZ(125px); }
.front { transform: translateZ(-125px); }

Each face is rotated and translated to form a cube. For instance, .top and .bottom are positioned using rotateX, while .right, .left, .back, and .front use rotateY and translateZ to align the cube’s faces correctly.

5. Hover Effect:

#cube-container:hover {
    transform: rotateX(-25deg) rotateY(-40deg) translate(-50%, -50%);
    transition: 2s cubic-bezier(.68,-0.55,.27,1.55);
}

On hover, the cube rotates along both X and Y axes, giving it a dynamic perspective shift. The cubic-bezier timing function provides a smooth and visually appealing transition effect.

Also keep learning with us.

Conclusion

This CSS-only 3D cube hover animation showcases the power and flexibility of CSS for creating interactive and visually striking effects. By combining transform, translate, and rotate properties with careful positioning, we can craft an engaging 3D effect that responds to user interaction.

Feel free to experiment with the dimensions, colors, and transitions to make this cube fit your design needs. Happy coding!

5 1 vote

Course Rating