Wednesday, 21 October 2015

CSS 3D Cube

                No comments   

C# jaduHi 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

Most Popular posts