Penggunaan CSS3 3D Transforms Yang Harus Kamu Tahu #4

 Author : hadinug, 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 hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda