Penggunaan CSS3 3D Transforms Yang Harus Kamu Tahu #4

 Author : Nugroho R. Hadi .W, 21 February, 2014, Komentar

Dibagian terkahir ini yaitu yang keempat kita akan membuat sebuah objek prism, atau biasa dibilang balok dengan css 3d transform. Nah jika pada cube terasa mudah bagi temana-teman, disini kita akan sedikit memutar otak utuk membuat objek 3d balok.


Pada HTML markup, kita tambahkan kode berikut:



<div class="container">
    <div id="box">
  	<figure class="front">1</figure>
	<figure class="back">2</figure>
	<figure class="right">3</figure>
	<figure class="left">4</figure>
	<figure class="top">5</figure>
	<figure class="bottom">6</figure>
    </div>
</div>
<section id="options">
    <p id="show-buttons">
	<button id="show-front">Show 1</button>
	<button id="show-back">Show 2</button>
	<button id="show-right">Show 3</button>
	<button id="show-left">Show 4</button>
	<button id="show-top">Show 5</button>
	<button id="show-bottom">Show 6</button>
    </p>
</section>


Full script css nya adalah sebagai berikut:


body, *{
    margin: 0px;
    padding: 0px;
}
.container {
    width: 300px;
    height: 200px;
    position: relative;
    margin: 100px auto 40px;
    border: 1px solid #CCC;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
}

#box {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
}

#box figure {
    display: block;
    position: absolute;
    border: 2px solid black;
    line-height: 196px;
    font-size: 90px;
    text-align: center;
    font-weight: bold;
    color: white;
}

#box.panels-backface-invisible figure {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

#box .front,
#box .back {
    width: 296px;
    height: 196px;
}

#box .right,
#box .left {
    width: 96px;
    height: 196px;
    left: 100px;
}

#box .top,
#box .bottom {
    width: 296px;
    height: 96px;
    top: 50px;
    line-height: 96px;
}


#box .front  { background: hsla( 000, 100%, 50%, 0.7 ); }
#box .back   { background: hsla( 160, 100%, 50%, 0.7 ); }
#box .right  { background: hsla( 120, 100%, 50%, 0.7 ); }
#box .left   { background: hsla( 180, 100%, 50%, 0.7 ); }
#box .top    { background: hsla( 240, 100%, 50%, 0.7 ); }
#box .bottom { background: hsla( 300, 100%, 50%, 0.7 ); }

#box .front  {
    -webkit-transform: translateZ( 50px );
    -moz-transform: translateZ( 50px );
    -o-transform: translateZ( 50px );
    transform: translateZ( 50px );
}
#box .back   {
    -webkit-transform: rotateX( -180deg ) translateZ(  50px );
    -moz-transform: rotateX( -180deg ) translateZ(  50px );
    -o-transform: rotateX( -180deg ) translateZ(  50px );
    transform: rotateX( -180deg ) translateZ(  50px );
}
#box .right {
    -webkit-transform: rotateY(   90deg ) translateZ( 150px );
    -moz-transform: rotateY(   90deg ) translateZ( 150px );
    -o-transform: rotateY(   90deg ) translateZ( 150px );
    transform: rotateY(   90deg ) translateZ( 150px );
}
#box .left {
    -webkit-transform: rotateY(  -90deg ) translateZ( 150px );
    -moz-transform: rotateY(  -90deg ) translateZ( 150px );
    -o-transform: rotateY(  -90deg ) translateZ( 150px );
    transform: rotateY(  -90deg ) translateZ( 150px );
}
#box .top {
    -webkit-transform: rotateX(   90deg ) translateZ( 100px );
    -moz-transform: rotateX(   90deg ) translateZ( 100px );
    -o-transform: rotateX(   90deg ) translateZ( 100px );
    transform: rotateX(   90deg ) translateZ( 100px );
}
#box .bottom {
    -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
    -moz-transform: rotateX(  -90deg ) translateZ( 100px );
    -o-transform: rotateX(  -90deg ) translateZ( 100px );
    transform: rotateX(  -90deg ) translateZ( 100px );
}


#box.show-front {
    -webkit-transform: translateZ(  -50px );
    -moz-transform: translateZ(  -50px );
    -o-transform: translateZ(  -50px );
    transform: translateZ(  -50px );
}
#box.show-back {
    -webkit-transform: translateZ( -50px ) rotateX( -180deg );
    -moz-transform: translateZ( -50px ) rotateX( -180deg );
    -o-transform: translateZ( -50px ) rotateX( -180deg );
    transform: translateZ( -50px ) rotateX( -180deg );
}
#box.show-right {
    -webkit-transform: translateZ( -150px ) rotateY(  -90deg );
    -moz-transform: translateZ( -150px ) rotateY(  -90deg );
    -o-transform: translateZ( -150px ) rotateY(  -90deg );
    transform: translateZ( -150px ) rotateY(  -90deg );
}
#box.show-left {
    -webkit-transform: translateZ( -150px ) rotateY(   90deg );
    -moz-transform: translateZ( -150px ) rotateY(   90deg );
    -o-transform: translateZ( -150px ) rotateY(   90deg );
    transform: translateZ( -150px ) rotateY(   90deg );
}
#box.show-top {
    -webkit-transform: translateZ( -100px ) rotateX(  -90deg );
    -moz-transform: translateZ( -100px ) rotateX(  -90deg );
    -o-transform: translateZ( -100px ) rotateX(  -90deg );
    transform: translateZ( -100px ) rotateX(  -90deg );
}
#box.show-bottom {
    -webkit-transform: translateZ( -100px ) rotateX(   90deg );
    -moz-transform: translateZ( -100px ) rotateX(   90deg );
    -o-transform: translateZ( -100px ) rotateX(   90deg );
    transform: translateZ( -100px ) rotateX(   90deg );
}p">Show 5</button>
	<button id="show-bottom">Show 6</button>
    </p>
</section>


Nah untuk menjalankan animasi, melihat posisi, depan, belakang, kiri dan kanan, kita tambahkan kode javascript:


<script type="text/javascript"> 
    document.getElementById('show-front').onclick = function() {
	box.removeAttribute("class");
	box.setAttribute("class", "show-front");
    };
    document.getElementById('show-back').onclick = function() {
	box.removeAttribute("class");
	box.setAttribute("class", "show-back");
    };
    document.getElementById('show-right').onclick = function() {
	box.removeAttribute("class");
	box.setAttribute("class", "show-right");
    };
    document.getElementById('show-left').onclick = function() {
	box.removeAttribute("class");
	box.setAttribute("class", "show-left");
    };
    document.getElementById('show-top').onclick = function() {
	box.removeAttribute("class");
	box.setAttribute("class", "show-top");
    };
    document.getElementById('show-bottom').onclick = function() {
	box.removeAttribute("class");
	box.setAttribute("class", "show-bottom");
    };
</script>


Untuk demonya bisa dilihat disni


 
Bagikan halaman ke sosial media
 
Tags :   css    css-3d       

Tentang Penulis

writer Nugroho R. Hadi .W
Lead Sofware Developer di PT. Yafii Solusi Internasional

Link: http://www.hadinug.net/

   Komentar Anda