Mengenal Transformasi 2D di CSS3

<div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; word-wrap: break-word;"> <em style="margin: 0px; padding: 0px;">M-S Blog || Artikel ini akan membahas <strong style="margin: 0px; padding: 0px;">CSS3 2D Transformation</strong>, merupakan lanjutan artikel sebelumnya dengan judul <strong style="margin: 0px; padding: 0px;">Mengenal Transformasi di CSS3</strong>.</em></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; word-wrap: break-word;"> Continue from our last catch up tentang basic css transformation. Sekarang kita akan bahas properti transformasi 2D dengan css3. Tujuannya untuk dapat merubah baik posisi, bentuk, dan sifat suatu elemen dalam bidang 2 dimensi.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; word-wrap: break-word;"> Seperti yang sudah kita bahas sebelumnya, transformasi diaktifkan dengan syntax transform yang diikuti dengan nama fungsi dan nilainya. Serta tambahan vendor prefix untuk mengatasi masalah cross-browser, seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_253693" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">trasnform: function(values);</code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">2</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"> </td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">3</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-webkit-transform: function(values);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; word-wrap: break-word;"> <b style="margin: 0px; padding: 0px;">Translate, TranslateX, TranslateY</b></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; word-wrap: break-word;"> Properties ini berfungsi merubah posisi elemen baik dalam arah horizontal (sumbu X), vertikal (sumbu Y), maupun keduanya. Nilainya bisa berapapun dengan beragam satuan (%, px, pc, em, vw, edll). Penulisannya seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_163197" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: translate( </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-350px</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">100%</code> <code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; word-wrap: break-word;"> Artinya elemen digeser sebesar 350px ke kiri dan 100% ke atas. Persen disini bukan mengacu pada lebarnya viewport, tapi mengacu pada lebarnya elemen kita. Jadi elemen di atas geser ke atas tepat sebesar lebarnya. Kamu bisa mencoba translateX, dan translateY dengan terpisah persis seperti di atas hanya nilai yang dimasukkan tunggal.</div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2tI6LqAhQvHPTsgpXce4fCjMy-HGcoqqc0_KWfVTF8QaeTaHsoOMzkJ0ydWwMZwd11MuaNwjNq-m6jCgaMQx1UBivG9R91WbT1ALEqZFCAOIAUp6pnHr8u-BTGm84E4FdWE7pxE5l2KM/s1600/css-2d-transform.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2tI6LqAhQvHPTsgpXce4fCjMy-HGcoqqc0_KWfVTF8QaeTaHsoOMzkJ0ydWwMZwd11MuaNwjNq-m6jCgaMQx1UBivG9R91WbT1ALEqZFCAOIAUp6pnHr8u-BTGm84E4FdWE7pxE5l2KM/s1600/css-2d-transform.jpg" width="640" /></a></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <br /></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Mungkin sekarang kamu berpikir, ‘Apa bedanya dengan properties yang lain, untuk hanya menggeser elemen saya bisa gunakan margin’. Ya, mungkin benar kamu bisa lakukan ini dengan margin, tapi transfrom memberikan kemudahan. Misalkan kamu punya elemen yang horizontally centered dengan margin: 0 auto. Lalu kamu ingin menggeser elemen itu ke kiri sebesar 70px. Ini tidak akan masalah jika kamu tahu persis lebarnya container elemen tersebut, sehingga nilai 70px memang nilai yang tepat. Namun, jika sebaliknya kamu tidak tahu berapa lebar persis container (dan memang mayoritas responsive design menggunakan lebar seperti ini), kamu dapat menggunakan translate untuk menggeser elemen tersebut, baik dengan satuan absolut (px, pc, pt) maupun relatif (em, %, vw).</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <b style="margin: 0px; padding: 0px;">Scale, ScaleX, ScaleY </b></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Berfungsi untuk merubah dimensi dari suatu elemen dan semua elemen di dalamnya (child elements). Kamu bisa menuliskannya secara singkat maupun secara terpisah dengan perantara koma, seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_743327" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: scale(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-1.5</code> <code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">3</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">);</code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">2</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"> </td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">3</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transfrom: scale(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">2</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Pada baris pertama, elemen diperkecil 1.5x ke arah X dan 3x ke arah Y. Kamu juga bisa menuliskan ini secara terpisah, jika hanya ingin merubah dalam satu sisi saja baik scaleX, maupun scaleY. Pada baris kedua elemen diperbesar 2x baik ke arah X dan Y. Selain itu, nilai negatif diperbolehkan dan menghasilkan mirror elemen, yap efek seperti cermin pada suatu objek. Kamu bisa lihat hasilnya di <a href="http://cdpn.io/kyqDJ" style="color: #047e7d; margin: 0px; padding: 0px; text-decoration: none;" target="_blank" title="2D Mirror Transformation">sini</a>.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <a href="http://cdpn.io/kyqDJ" style="color: #047e7d; margin: 0px; padding: 0px; text-decoration: none;" target="_blank" title="2D Mirror Transformation"><strong style="margin: 0px; padding: 0px;">DEMO</strong></a></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Bagi kamu yang senang fancy desain mungkin efek ini membantu, in my humble opinion,  jika menerapkan efek pikirkan terlebih dahulu konsep matang sebelum memasangkan semua skill set kita.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <b style="margin: 0px; padding: 0px;">Rotate</b></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Berfungsi untuk memutar elemen. Nilai yang dipakai dapat dalam deg (derajat) maupun rad (radian), seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_891846" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: rotate(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">45</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">deg);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Elemen di atas diputar sebesar 45 derajat searah jarum jam. Sebaliknya apabila nilai negatif maka berlawanan arah jarum jam. Elemen berputar pada porosnya yang berada di tengah-tengah elemen tersebut. Kamu kapanpun bisa merubah posisi porosnya dengan properti transform-origin, dengan nilai: left, right, top, bottom, dan gabungan pojok-pojoknyo, seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_596171" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform-origin: right-</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">top</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">;</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Elemen diubah posisi porosnya menjadi di kanan atas elemen, sehingga rotasi yang terjadi akan mengacu pada titik tersebut.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <strong style="margin: 0px; padding: 0px;">SkewX dan SkewY</strong></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Berfungsi untuk memiringkan elemen. Kesimetrisan elemen pada sumbu X dan sumbu Y terpecahkan dengan properties ini. Anyway, penulisan skewX dan skewY secara singkat, saat ini sudah ditiadakan dari spesifikasi sehingga tidak lagi kita gunakan. Kamu bisa tulis seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_699555" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: skewX(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">40</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">deg);</code></td></tr> </tbody></table> </div> <div class="line alt2" style="background-color: rgb(248, 248, 248) !important; background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">2</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"> </td></tr> </tbody></table> </div> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">3</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: skewY(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-1.5</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">rad);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Kamu bisa lihat hasilnya di <a href="http://cdpn.io/kyqDJ" style="color: #047e7d; margin: 0px; padding: 0px; text-decoration: none;" target="_blank" title="Skew 2D Transformation">sini</a>.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <a href="http://cdpn.io/kyqDJ" style="color: #047e7d; margin: 0px; padding: 0px; text-decoration: none;" target="_blank" title="Demo 2D Skew Transformation"><strong style="margin: 0px; padding: 0px;">DEMO Skew 2D Transformation</strong></a></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <strong style="margin: 0px; padding: 0px;">Transformasi Gabungan</strong></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Seperti namanya, gabungan terdengar legit. Yap, kita bisa menggabungkan semua properties transformation di atas menjadi satu kode singkat (shorthand) dengan pemisah tanda koma. Seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_857813" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: scale(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">2</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">), rotate(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">45</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">deg), skewX(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">40</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">deg), skewY(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-1.5</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">rad);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Kalo kamu seorang engineer atau scientist atau matematiks geeks, kamu pasti menyukai matriks. Kamu bisa gunakan matriks kesayangan kamu untuk mentransformasi elemen di css3. Css3 memberikan 6 kolom matriks dengan 4 kolom pertama menunjukkan transformasi dan 2 kolom terakhir menunjukkan perbesaran dimensi (scaling). Seperti ini:</div> <div class="syntaxhighlighter " id="highlighter_737047" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: matrix(</code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-350</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">200</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">45</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-1.5</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">-1.5</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">, </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">3</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">);</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Nilai matriks ini dioperasikan kepada seluruh point pada elemen untuk membentuk bentuk dan posisi yang baru.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> <strong style="margin: 0px; padding: 0px;">Saya mau cancel Transformation, caranya gimana?</strong></div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Mudah, simply write syntax like this:</div> <div class="syntaxhighlighter " id="highlighter_279819" style="background-color: rgb(255, 255, 255) !important; background-image: none !important; border: 1px solid rgb(224, 224, 224) !important; bottom: auto !important; color: #333333; direction: ltr !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 1em 0px !important; outline: 0px !important; padding: 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 496.53125px; word-wrap: break-word;"> <div class="lines no-wrap" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <div class="line alt1" style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; word-wrap: break-word;"> <table style="background-image: none !important; border-collapse: collapse !important; border-spacing: 0px; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; font-size: 12px !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; max-width: 100%; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; text-align: justify; top: auto !important; vertical-align: baseline !important; width: auto !important;"><tbody style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> <tr style="background-image: none !important; border: 0px !important; bottom: auto !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="number" style="background-image: none !important; border: 0px !important; bottom: auto !important; color: rgb(175, 175, 175) !important; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; width: 3em !important;"><code style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: #111111; direction: ltr !important; display: block !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0.3em 0px 0px !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: 2.7em !important;">1</code></td><td class="content" style="-webkit-box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; background-image: none !important; border-left-color: rgb(108, 226, 108) !important; border-left-style: solid !important; border-width: 0px 0px 0px 3px !important; bottom: auto !important; box-shadow: rgb(222, 222, 222) 5px 0px 10px -5px; direction: ltr !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px 0px 0px 0.5em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: top !important; white-space: pre !important; width: auto !important;"><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">transform: </code><code class="value" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; color: rgb(0, 153, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">none</code><code class="plain" style="background-image: none !important; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px !important; bottom: auto !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: nowrap; width: auto !important;">;</code></td></tr> </tbody></table> </div> </div> </div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Kode ini kamu tulis pada elemen yang kamu inginkan batal transformasi. Metode ini lebih baik dilakukan dibandingkan kamu menghapus semua kode yang sudah kamu buat sebelumnya. Selain lebih mudah menulis sedikit kode kamu juga bisa mengundo redo pekerjaan kamu untuk mendapatkan efek yang kamu inginkan.</div> <div style="background-color: white; color: #333333; font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; font-size: 15px; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: justify; word-wrap: break-word;"> Booya, sampai sini kamu bisa membuat efek transofrmasi 2D di css3.</div> <div style="font-family: Gudea, helvetica, arial, verdana, 'Times New roman', sans-serif; line-height: 22.5px; margin-bottom: 10px; padding: 0px; text-align: right; word-wrap: break-word;"> <span style="background-color: #999999; color: white; font-size: x-small;">Source : http://www.tutorial-webdesign.com/css3-2d-transformation/</span></div>

M-S Blog || Artikel ini akan membahas CSS3 2D Transformation, merupakan lanjutan artikel sebelumnya dengan judul Mengenal Transformasi di CSS3. Conti…

Read more »