Hi Friends...CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you've got something really neat. Unfortunately each CSS cube tutorial I've read is a bit long and a mixes visual style with the cube basics, so I've decided to write a post which provides just the basic detail needed to create a CSS cube.
HTML & CSS Code
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
margin-top: 125px;
}
@-moz-keyframes spinningH {
from {
-moz-transform: rotateX(0deg) rotateY(0deg);
}
to{
-moz-transform: rotateX(360deg) rotateY(360deg);
}
}
@-webkit-keyframes spinningH {
from {
-webkit-transform: rotateX(0deg) rotateY(0deg);
}
to{
-webkit-transform: rotateX(360deg) rotateY(360deg);
}
}
/*@-o-keyframes spinningH {
from {
-o-transform: rotateX(0deg) rotateY(0deg);
}
to{
-o-transform: rotateX(360deg) rotateY(360deg);
}
}*/
@-ms-keyframes spinningH {
from {
-ms-transform: rotateX(0deg) rotateY(0deg);
}
to{
-ms-transform: rotateX(360deg) rotateY(360deg);
}
}
@keyframes spinningH {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
#container {
-webkit-perspective : 1000px;
-moz-perspective : 1000px;
-o-perspective : 1000px;
-ms-perspective : 1000px;
perspective : 1000px;
-webkit-perspective-origin : 50% 50%;
-moz-perspective-origin : 50% 50%;
-moz-transform-origin : 50% 50%;
-o-perspective-origin : 50% 50%;
-ms-perspective-origin : 50% 50%;
perspective-origin : 50% 50%;
}
.animate {
-webkit-animation : spinningH 5s infinite linear;
-moz-animation : spinningH 5s infinite linear;
-o-animation : spinningH 5s infinite linear;
-ms-animation : spinningH 5s infinite linear;
animation : spinningH 5s infinite linear;
}
#cube {
position: relative;
margin: 0 auto;
height: 400px;
width: 400px;
-webkit-transition : -webkit-transform 2s linear;
-moz-transition : -moz-transform 2s linear;
-o-transition : -o-transform 2s linear;
-ms-transition : -ms-transform 2s linear;
transition : transform 2s linear;
-webkit-transform-style : preserve-3d;
-moz-transform-style : preserve-3d;
-o-transform-style : preserve-3d;
-ms-transform-style : preserve-3d;
transform-style : preserve-3d;
}
#cube>div {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
opacity: 0.95;
background-position:center center;
}
#cube div:nth-child(1) {
-webkit-transform : translateZ(200px);
-moz-transform : translateZ(200px);
-o-transform : translateZ(200px);
-ms-transform : translateZ(200px);
transform : translateZ(200px);
background-color : #db6b11;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgr5zGwu9KDFJELC-Xlgjdp8wSRIf4BhKDZFV6AFSrJgc_Z2eiJsna2vnMs-guV1OgI9lqfO1hhBnc4V_QBNpbNgNyobAlz5meMtwCSM5WxrD4w11zqAqmsfakk863deRWWr6O54helSa/s1600-r/finalc%2523logoPNGupdated.png);
background-repeat : no-repeat;
}
#cube div:nth-child(2) {
-webkit-transform : rotateY(90deg) translateZ(200px);
-moz-transform : rotateY(90deg) translateZ(200px);
-o-transform : rotateY(90deg) translateZ(200px);
-ms-transform : rotateY(90deg) translateZ(200px);
transform : rotateY(90deg) translateZ(200px);
background-color : #db6b11 ;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgr5zGwu9KDFJELC-Xlgjdp8wSRIf4BhKDZFV6AFSrJgc_Z2eiJsna2vnMs-guV1OgI9lqfO1hhBnc4V_QBNpbNgNyobAlz5meMtwCSM5WxrD4w11zqAqmsfakk863deRWWr6O54helSa/s1600-r/finalc%2523logoPNGupdated.png);
background-repeat : no-repeat;
}
#cube div:nth-child(3) {
-webkit-transform : rotateY(180deg) translateZ(200px);
-moz-transform : rotateY(180deg) translateZ(200px);
-o-transform : rotateY(180deg) translateZ(200px);
-ms-transform : rotateY(180deg) translateZ(200px);
transform : rotateY(180deg) translateZ(200px);
background-color : #db6b11 ;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgr5zGwu9KDFJELC-Xlgjdp8wSRIf4BhKDZFV6AFSrJgc_Z2eiJsna2vnMs-guV1OgI9lqfO1hhBnc4V_QBNpbNgNyobAlz5meMtwCSM5WxrD4w11zqAqmsfakk863deRWWr6O54helSa/s1600-r/finalc%2523logoPNGupdated.png);
background-repeat : no-repeat;
}
#cube div:nth-child(4) {
-webkit-transform : rotateY(-90deg) translateZ(200px);
-moz-transform : rotateY(-90deg) translateZ(200px);
-o-transform : rotateY(-90deg) translateZ(200px);
-ms-transform : rotateY(-90deg) translateZ(200px);
transform : rotateY(-90deg) translateZ(200px);
background-color : #db6b11 ;
background-image : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgr5zGwu9KDFJELC-Xlgjdp8wSRIf4BhKDZFV6AFSrJgc_Z2eiJsna2vnMs-guV1OgI9lqfO1hhBnc4V_QBNpbNgNyobAlz5meMtwCSM5WxrD4w11zqAqmsfakk863deRWWr6O54helSa/s1600-r/finalc%2523logoPNGupdated.png);
background-repeat : no-repeat;
}
#cube div:nth-child(5) {
-webkit-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);
-moz-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);
-o-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);
-ms-transform : rotateX(-90deg) translateZ(200px) rotate(180deg);
transform : rotateX(-90deg) translateZ(200px) rotate(180deg);
background-color : #fff;
background-image : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgr5zGwu9KDFJELC-Xlgjdp8wSRIf4BhKDZFV6AFSrJgc_Z2eiJsna2vnMs-guV1OgI9lqfO1hhBnc4V_QBNpbNgNyobAlz5meMtwCSM5WxrD4w11zqAqmsfakk863deRWWr6O54helSa/s1600-r/finalc%2523logoPNGupdated.png);
background-repeat :no-repeat;
}
#cube div:nth-child(6) {
-webkit-transform : rotateX(90deg) translateZ(200px);
-moz-transform : rotateX(90deg) translateZ(200px);
-o-transform : rotateX(90deg) translateZ(200px);
-ms-transform : rotateX(90deg) translateZ(200px);
transform : rotateX(90deg) translateZ(200px);
background-color : #fff ;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQgr5zGwu9KDFJELC-Xlgjdp8wSRIf4BhKDZFV6AFSrJgc_Z2eiJsna2vnMs-guV1OgI9lqfO1hhBnc4V_QBNpbNgNyobAlz5meMtwCSM5WxrD4w11zqAqmsfakk863deRWWr6O54helSa/s1600-r/finalc%2523logoPNGupdated.png);
background-repeat :no-repeat;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="cube" class="animate">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
0 comments:
Post a Comment