Home » » Creating CSS 3D Cubes in Blog

Creating CSS 3D Cubes in Blog

Posted by Ran Dreamer on 28 Mar 2015

Creating CSS 3D Cubes in Blog - Talking about effects, previously also Labston have shared about how to make black and white effect on the image, and how to create the effect of image rotation in the blog. And maybe you would be better off to make coding CSS3 Animation and would be more impressive if you own that makes it.
css 3d


1. As Usual, login to your Blogger account
2. Click the Templates »Edit HTML
3. Then press Ctrl + F search for the code ]]> </ b: skin> 
4. Then add the following CSS script just above the code ]]> </ b: skin> 

#viewport { background-color:#000000; width:600px; height:350px; margin:0 auto; position:relative; -webkit-perspective:700px; -webkit-perspective-origin:50% 50%; -moz-perspective:700px; -moz-perspective-origin:50% 50%; -ms-perspective:700px; -ms-perspective-origin:50% 50%; }
.cube { position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px; width:100px; height:100px; -webkit-animation:test 5s infinite; -webkit-transform-origin:50% 50%; -webkit-transform-style:preserve-3d; -moz-animation:test 5s infinite; -moz-transform-origin:50% 50%; -moz-transform-style:preserve-3d; -ms-animation:test 5s infinite; -ms-transform-origin:50% 50%; -ms-transform-style:preserve-3d; }
@-webkit-keyframes test {
    0% { -webkit-transform:rotateX(0deg) rotateY(-45deg); } 50% { -webkit-transform:rotateX(90deg) rotateY(315deg); } 100% { -webkit-transform:rotateX(180deg) rotateY(-45deg); }
}
@-moz-keyframes test {
    0% { -moz-transform:rotateX(0deg) rotateY(-45deg); } 50% { -moz-transform:rotateX(90deg) rotateY(315deg); } 100% { -moz-transform:rotateX(180deg) rotateY(-45deg); }
}
@-ms-keyframes test {
    0% { -ms-transform:rotateX(0deg) rotateY(-45deg); } 50% { -ms-transform:rotateX(90deg) rotateY(315deg); } 100% { -ms-transform:rotateX(180deg) rotateY(-45deg); }
}
.cube .plain { position:absolute; display:block; content:""; width:100px; height:100px; background:rgba(0,0,0,0.75); border:2px dashed #fff; -webkit-box-sizing:border-box; -webkit-transform-origin:50% 50%; -webkit-transform-style:flat; -webkit-animation:bordercolor 5s infinite; -moz-box-sizing:border-box; -moz-transform-origin:50% 50%; -moz-transform-style:flat; -moz-animation:bordercolor 5s infinite; -ms-box-sizing:border-box; -ms-transform-origin:50% 50%; -ms-transform-style:flat; -ms-animation:bordercolor 5s infinite; }
@-webkit-keyframes bordercolor {
    0% { border-color:#0cf; } 50% { border-color:#fff; } 100% { border-color:#0cf; }
}
@-moz-keyframes bordercolor {
    0% { border-color:#0cf; } 50% { border-color:#fff; } 100% { border-color:#0cf; }
}
@-ms-keyframes bordercolor {
    0% { border-color:#0cf; } 50% { border-color:#fff; } 100% { border-color:#0cf; }
}
.cube .plain:nth-child(1) { -webkit-transform:rotateY(-90deg) translate3d(0,0,100px); -moz-transform:rotateY(-90deg) translate3d(0,0,100px); -ms-transform:rotateY(-90deg) translate3d(0,0,100px); }
.cube .plain:nth-child(2) { -webkit-transform:rotateY(90deg) translate3d(0,0,100px); -moz-transform:rotateY(90deg) translate3d(0,0,100px); -ms-transform:rotateY(90deg) translate3d(0,0,100px); }
.cube .plain:nth-child(3) { -webkit-transform:rotateX(-90deg) translate3d(0,0,100px); -moz-transform:rotateX(-90deg) translate3d(0,0,100px); -ms-transform:rotateX(-90deg) translate3d(0,0,100px); }
.cube .plain:nth-child(4) { -webkit-transform:rotateX(90deg) translate3d(0,0,100px); -moz-transform:rotateX(90deg) translate3d(0,0,100px); -ms-transform:rotateX(90deg) translate3d(0,0,100px); }
.cube .plain:nth-child(5) { -webkit-transform:rotateX(180deg) translate3d(0,0,100px); -moz-transform:rotateX(180deg) translate3d(0,0,100px); -ms-transform:rotateX(180deg) translate3d(0,0,100px); }
.cube .plain:nth-child(6) { -webkit-transform:translate3d(0,0,100px); -moz-transform:translate3d(0,0,100px); -ms-transform:translate3d(0,0,100px); }

 Copy the code below and paste it into html mode posts

<div id="viewport">
    <div class="cube">
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
    </div>
</div>

Share This Post :
 
Copyright © 2015 LABSTON | Adsense, Blogger, Android, Backlink, SEO, Template. All Rights Reserved
Template Johny Wuss Responsive by Creating Website and CB Design