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.
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>
