Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • 3D Spinning Cube Using CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.11k
    Comment on it

    Hello reader's. I have created a 3D spinning cubes using CSS3 by simply using the transform,animation and transition property over the elements.

    In my example, I have taken a cube element comprising of each face of the cube having its own elements such as front, back, top, bottom, left, right. I have also tried to change the direction of the spinning cube to vertical using the CSS3 properties.

    Below is the html code:-

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    
    <title>Spinning Cube</title>
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
    </head>
    
    <body>
    
    <!-- =container start= -->
    
    <div class="container">
    
    <!-- =section block start= -->
    
    <div class="section" style="text-align:center;">
    
    <h1 >Spinning Cube Using CSS3</h1>
    
    <!-- =cube section start= -->
    
    <div class="cube" style="margin:auto;">
    
    <div class="front">Front</div>
    
    <div class="back">back</div>
    
    <div class="top">top</div>
    
    <div class="bottom">bottom</div>
    
    <div class="left">left</div>
    
    <div class="right">right</div>
    
    </div><!-- =cube section end// -->
    
    </div><!-- = section block end// -->
    
    <!-- =vertical-spin block start= -->
    
    <div class="vertical-spin" style="text-align:center;">
    
    <h2>Vertical spinning cube</h2>
    
    <!-- =cube section start= -->
    
    <div class="cube" style="margin:auto;">
    
    <div class="front">Front</div>
    
    <div class="back">back</div>
    
    <div class="top">top</div>
    
    <div class="bottom">bottom</div>
    
    <div class="left">left</div>
    
    <div class="right">right</div>
    
    </div><!-- =cube section end// -->
    
    </div><!-- =vertical-spin block end// -->
    
    </div><!-- =container end// -->
    
    </body>
    
    </html>

    In the CSS, I have used perspective and perspective-origin property of CSS. This property allow us to change the perspective of the 3D element so that how it can be viewed while the perspective-origin property allow us change the 3D elements bottom position.

    I have set the cube position and had used transform-style: preserve-3d so that to keep the element 3D.I have also used @keyframe rules for specifying the animated code to the particular element which needs the animation. With the spinner property, the cube will spin by setting the properties in the @keyframe for the particular elements that are to be animate.

    For the cube to spin vertically, I need to set the rotataion of the faces of the cube using the rotate, transform and translate property.

    Below is the CSS code:-

    /*Cube elements start*/
    
    .section{
    
    perspective: 800px;
    
    perspective-origin: 50% 100px;
    
    margin-top: 40px;
    
    }
    
    .cube{
    
    position: relative;
    
    width: 200px;
    
    transform-style: preserve-3d;
    
    padding-top: 40px;
    
    animation: cube-spin 5s infinite linear;
    
    }
    
    .cube div{
    
    position: absolute;
    
    width: 200px;
    
    height: 200px;
    
    background: rgba(255,255,255,0.1);
    
    box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
    
    font-size: 20px;
    
    text-align: center;
    
    line-height: 200px;
    
    color: rgba(0,0,0,0.5);
    
    font-family: sans-serif;
    
    text-transform: uppercase;
    
    }
    
    .back {
    
    transform: translateZ(-100px) rotateY(180deg);
    
    }
    
    .right {
    
    transform: rotateY(-270deg) translateX(100px);
    
    transform-origin: top right;
    
    }
    
    .left {
    
    transform: rotateY(270deg) translateX(-100px);
    
    transform-origin: center left;
    
    }
    
    .top {
    
    transform: rotateX(-90deg) translateY(-100px);
    
    transform-origin: top center;
    
    }
    
    .bottom {
    
    transform: rotateX(90deg) translateY(100px);
    
    transform-origin: bottom center;
    
    }
    
    .front {
    
    transform: translateZ(100px);
    
    }
    
    @keyframes cube-spin{
    
    
    
    0% {
    
    transform: rotateY(0);
    
    }
    
    100% {
    
    transform: rotateY(360deg);
    
    }
    
    
    
    }
    
    /*Vertical spin block start */
    
    .vertical-spin{
    
    margin-top: 268px;
    
    perspective: 800px;
    
    perspective-origin: 50% 100px;
    
    }
    
    .vertical-spin .cube{
    
    transform-origin:0 100px;
    
    position: relative;
    
    width: 200px;
    
    transform-style: preserve-3d;
    
    animation: spin-vertical 5s infinite linear;
    
    }
    
    .vertical-spin .cube div{
    
    position: absolute;
    
    width: 200px;
    
    height: 200px;
    
    background: rgba(255,255,255,0.1);
    
    box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
    
    font-size: 20px;
    
    text-align: center;
    
    line-height: 200px;
    
    color: rgba(0,0,0,0.5);
    
    font-family: sans-serif;
    
    text-transform: uppercase;
    
    }
    
    @keyframes spin-vertical {
    
    from { transform: rotateX(0); }
    
    to { transform: rotateX(-360deg); }
    
    }
    
    
    
    .vertical-spin.cube {
    
    margin: 0 auto; /* keeps the cube centered */
    
    
    
    transform-origin: 0 100px;
    
    animation: spin-vertical 5s infinite linear;
    
    }
    
    
    
    .vertical-spin .top {
    
    transform: rotateX(-270deg) translateY(-100px);
    
    }
    
    
    
    .vertical-spin .back {
    
    transform: translateZ(-100px) rotateX(180deg);
    
    }
    
    
    
    .vertical-spin .bottom {
    
    transform: rotateX(-90deg) translateY(100px);
    
    }

    Conclusion:

    Hence, the 3D spinning cube is created by simply using the CSS3 properties.

    Note:- The following example will run on the latest version browsers efficiently such as on Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 .

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: