how to make 3d cube using html and css

Welcome friends,

In this article I have made a 3d cube animation using only HTML and CSS. HTML and CSS code given below seperately.









HTML code:-



<!DOCTYPE html>
<html>
<head>
                <title>Pure CSS animated cube</title>
</head>
<body>

                <div class="cube">
                               
                                <span class="up"></span>
                                <span class="front"></span>
                                <span class="down"></span>
                                <span class="back"></span>
                                <span class="left"></span>
                                <span class="right"></span>
                                                <!--six span tag for six surface of cube-->

                </div>

</body>
</html>





CSS code:-


body
{
                background:#abddfd;
                justify-content: center;
                align-items: center;
                display: flex;
                height: 90vh;
}
.cube
{
                align-items: center;
                justify-content: center;
                height: 100px;
                width: 100px;
                position: fixed;
                transform-style: preserve-3d;
                transform:perspective(500px) rotateZ(45deg) rotateY(60deg);
                animation: animate 10s infinite;
}

@keyframes animate
{
                10%
                {
                                transform: rotateX(20deg);
                }
                30%
                {
                                transform: rotateX(180deg);
                }
                40%
                {
                                transform: rotateX(360deg);
                }
                50%
                {
                                transform: rotateZ(210deg);
                }
                70%
                {
                                transform: rotateY(40deg);
                }
                90%
                {
                                transform: rotateX(250deg);
                }
}
.up
{
                background:pink;
                height: 100px;
                width: 100px;
                display: block;

                transform-origin: bottom;
                transform:rotateX(90deg);
}
.front
{
                background:green;
                height: 100px;
                width: 100px;
                display: block;
}
.down
{
                background:red;
                height: 100px;
                width: 100px;
                display: block;

                transform-origin: top;
                transform:rotateX(-90deg);
}

.back
{
                background:yellow;
                height: 100px;
                width: 100px;
                display: block;

                transform:translateY(-200px) translateZ(-100px);
}

.left
{
                background:gray;
                height: 100px;
                width: 100px;
                display: block;

                transform-origin: right;
                transform:rotateY(-90deg) translateY(-300px);

}

.right
{
                background:blue;
                height: 100px;
                width: 100px;
                display: block;

                transform-origin: left;
                transform:rotateY(90deg) translateY(-400px);
}




Post a Comment

0 Comments