Membuat Kubik dengan CSS3

CSS
@-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 6s infinite linear; 
  -moz-animation    : spinningH 6s infinite linear; 
  -o-animation      : spinningH 6s infinite linear; 
  -ms-animation     : spinningH 6s infinite linear; 
  animation         : spinningH 6s 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.9; 
  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  : #2E272F; 
  background-image: url(http://2.bp.blogspot.com/-dWiqYuvrOVs/UrgXTOD8TeI/AAAAAAAAAfk/9292ruRxeI8/s1600/wallpaper-graffiti-shaka.jpg); 
  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  : #2D3A4D; 
  background-image: url(http://2.bp.blogspot.com/-afA1jOVrugE/UGxXhi82FNI/AAAAAAAAA20/olIM3YJ2Vu0/s1600/psychedelic-face.jpg); 
  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  : #2D1C12; 
  background-image: url(http://frontpsych.files.wordpress.com/2011/11/psychedelic.jpeg); 
  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  : #693C1F; 
  background-image  : url(http://fc07.deviantart.net/fs70/f/2013/050/0/d/psychedelic_wolf_by_lioncrusher-d1anmx0.jpg); 
  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  : #955122; 
  background-image  : url(http://th07.deviantart.net/fs70/PRE/f/2010/355/4/8/psychedelic_vision_by_thelma1-d35ctgv.jpg); 
  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  : #E34C26; 
  background-image: url(data:image/png;base64,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); 
  background-repeat :no-repeat; 
  text-align:center;  
}

HTML
<div id="container"> 
  <div id="cube" class="animate"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
  </div> 
</div>

Hasilnya:












Happy Blogging!

1 comments:

Ninda delete June 23, 2014 at 5:45 PM

tutorialnya oke :D
eh emang kenapa dengan ratubilqis?

Allowed tag: <i>...</i> <b>...</b> [img]...[/img] <youtube>...</youtube> [pre]...[/pre]

Emoticons

:) :D :coffee :( :malu :sorry :takut :ultah :traveller :sup :sup2 :toast :confused :wizard :manyun :zzz :cool :lol :cat :mad :bandit :smoking