Rotating 3D Cube effect using HTML and CSS

In this article, we are going to learn to make 3D Cube using HTML and CSS and then rotate it using css transform property.

Full Source Code :

<html>
    <head>
        <style type="text/css">
            .stage{
            	margin:0 auto;
            }
            @-webkit-keyframes spincube {
            from,
            to {
            -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            16% {
            -webkit-transform: rotateY(-90deg);
            }
            33% {
            -webkit-transform: rotateY(-90deg) rotateZ(90deg);
            }
            50% {
            -webkit-transform: rotateY(-180deg) rotateZ(90deg);
            }
            66% {
            -webkit-transform: rotateY(-270deg) rotateX(90deg);
            }
            83% {
            -webkit-transform: rotateX(90deg);
            }
            }
            @keyframes spincube {
            from,
            to {
            -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            16% {
            -moz-transform: rotateY(-90deg);
            -ms-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
            }
            33% {
            -moz-transform: rotateY(-90deg) rotateZ(90deg);
            -ms-transform: rotateY(-90deg) rotateZ(90deg);
            transform: rotateY(-90deg) rotateZ(90deg);
            }
            50% {
            -moz-transform: rotateY(-180deg) rotateZ(90deg);
            -ms-transform: rotateY(-180deg) rotateZ(90deg);
            transform: rotateY(-180deg) rotateZ(90deg);
            }
            66% {
            -moz-transform: rotateY(-270deg) rotateX(90deg);
            -ms-transform: rotateY(-270deg) rotateX(90deg);
            transform: rotateY(-270deg) rotateX(90deg);
            }
            83% {
            -moz-transform: rotateX(90deg);
            -ms-transform: rotateX(90deg);
            transform: rotateX(90deg);
            }
            }
            .cubespinner {
            -webkit-animation-name: spincube;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-duration: 20s;
            animation-name: spincube;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-duration: 20s;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform-origin: 60px 60px 0;
            -moz-transform-origin: 60px 60px 0;
            -ms-transform-origin: 60px 60px 0;
            transform-origin: 60px 60px 0;
            }
            .cubespinner div {
            position: absolute;
            width: 250px;
            height: 250px;
            border: 1px solid #ccc;
            background: rgba(255, 255, 255, 0.8);
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            font-size: 100px;
            }
            .cubespinner .face1 {
            -webkit-transform: translateZ(125px);
            -moz-transform: translateZ(125px);
            -ms-transform: translateZ(125px);
            transform: translateZ(125px);
            
            }
            .cubespinner .face2 {
            -webkit-transform: rotateY(90deg) translateZ(125px);
            -moz-transform: rotateY(90deg) translateZ(125px);
            -ms-transform: rotateY(90deg) translateZ(125px);
            transform: rotateY(90deg) translateZ(125px);
            }
            .cubespinner .face3 {
            -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(125px);
            -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(125px);
            -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(125px);
            transform: rotateY(90deg) rotateX(90deg) translateZ(125px);
            }
            .cubespinner .face4 {
            -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(125px);
            -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(125px);
            -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(125px);
            transform: rotateY(180deg) rotateZ(90deg) translateZ(125px);
            }
            .cubespinner .face5 {
            -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px);
            -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px);
            -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px);
            transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px);
            }
            .cubespinner .face6 {
            -webkit-transform: rotateX(-90deg) translateZ(125px);
            -moz-transform: rotateX(-90deg) translateZ(125px);
            -ms-transform: rotateX(-90deg) translateZ(125px);
            transform: rotateX(-90deg) translateZ(125px);
            }
        </style>
    </head>
    <body style="margin: 10em;">
        <div class="stage" style="width: 250px; height: 250px;">
            <div class="cubespinner">
                <div class="face1">
                    Face 1
                </div>
                <div class="face2">
                    Face 2
                </div>
                <div class="face3">
                    Face 3
                </div>
                <div class="face4">
                    Face 4
                </div>
                <div class="face5">
                    Face 5
                </div>
                <div class="face6">
                    Face 6
                </div>
            </div>
        </div>
    </body>
</html>

ALSO READ Design a Attractive Custom 404 Page

Follow this video for complete guidance :