M-S Blog: CSS

Showing posts with label CSS. Show all posts

Penjelasan Margin, Padding, Border dalam CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiEyW-2vM9cOGW8iw5BBbraWXQAHNQozJJ_sFG6BIVULSy5MmdYaPgcLHMc3x_Rciwsjtas0dPejugIIYTGzhcL7dEXpps43MAZiPtlIGviVDv07tfO9nJK5Kfy7Iz1NpOP8cx4YFURyM/s1600/css-web-design.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Penjelasan Margin, Padding, Border dalam CSS " border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiEyW-2vM9cOGW8iw5BBbraWXQAHNQozJJ_sFG6BIVULSy5MmdYaPgcLHMc3x_Rciwsjtas0dPejugIIYTGzhcL7dEXpps43MAZiPtlIGviVDv07tfO9nJK5Kfy7Iz1NpOP8cx4YFURyM/s640/css-web-design.jpg" title="css" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><h1 class="post-title entry-title">
Penjelasan Margin, Padding, Border dalam CSS
</h1>
</td></tr>
</tbody></table>
 
Topik kali ini mengenai CSS "Pengertian Margin, Padding, dan Border".
 tentu bagi CSS developer yang sudah berpengalaman ini topik yang sangat
 sederhana. Tapi saya pikir juga tidak ada salahnya sharing topik CSS basic
 ini, arti dan penyajian elemen dengan menggunakan kode CSS untuk 
margin, padding serta border property.
 
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
 
Dengan memahami margin, padding, border dan cara menerapkan 
dengan CSS, akan memberi kesempatan bagi pemula, untuk 
bereksperimen sendiri dengan menentukan dan mengatur sifat dan nilai 
property. Ini sering dijumpai pada penerapan css style pada template, 
.body {..},.sidebar {...},. container {...}, css widget, pengaturan 
posisi dan jarak (space) antara sidebar, penerapan pada pargaraf 
posting, pada h1, h2.....dst.</div>
<h4>
Apa Margin itu?</h4>
<div style="text-align: justify;">
Margin (dalam pengertian CSS) adalah ruang disekitar 
elemen/konten. Margin akan membentuk daerah (ruang) vertikal dan 
horizontal antara elemen. Jika elemen/konten tidak memilki margin, maka 
elemen-elemen tersebut akan rapat bertemu terhadap satu sama lain. Agar 
margin bekerja dengan baik, elemen biasanya diikuti oleh posisi float 
atau diposisikan relative. Style ini sering diterapkan untuk dapat 
memindahkan elemen lain di sekitarnya.</div>
<div style="text-align: justify;">
Secara visual akan lebih mudah memahami definisi dari margin ini :</div>
<div style="text-align: justify;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3fhHNcReaD__uRMcidsmPpUO78MuLGpPOIv6EcIRwXHKXWw-eF9Ow_Z7hhqHh6VrxVYtYtBQ62Y8hQ_exrleQM8cjs8423xFQdPOj0NpY8zq3JCUj1CzsDHXQzMFfEwR0rjHMUHOrIVje/s1600/padding-margin.png" style="margin-left: auto; margin-right: auto;"><img border="0" height="604" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3fhHNcReaD__uRMcidsmPpUO78MuLGpPOIv6EcIRwXHKXWw-eF9Ow_Z7hhqHh6VrxVYtYtBQ62Y8hQ_exrleQM8cjs8423xFQdPOj0NpY8zq3JCUj1CzsDHXQzMFfEwR0rjHMUHOrIVje/s640/padding-margin.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">visualisasi pengertian margin</td></tr>
</tbody></table>
<div style="text-align: justify;">
</div>
Margin dapat diatur menggunakan properti margin "shorthand" (yaitu 
istilah, yang mewakili empat nilai marjin untuk elemen) atau dengan 
penulisan stye "longhand". Untuk itu dibawah saya beri contoh beberapa 
penulisan margin dalam css. 
 
Contoh penulisan margin pada suatu elemen ("shorthand") 
 
<pre>#element { margin: 10px;}</pre>
 
Ini berarti elemen memilki margin yang sama "10px" untuk setiap sisi elemen 
 
<pre>#element { margin: 10px 20px; }</pre>
 
Ini berarti elemen memiliki: 
-margin-top, margin-bottom : "10px" 
-margin-left, margin-right : "20px" 
 
<pre>#element { margin: 10px 20px 5px 15px; }</pre>
 
Elemen ini memiliki -margin-top : 10px, margin-right: 20px,  margin-bottom : 5px, margin-left: 15px 
 
Berikut penulisan margin style "longhand": 
<pre>#element { margin-top: 10px; margin-right: 5px; margin-bottom: 5px; margin-left: 10px;}</pre>
 
<h4>
Apa Padding itu?</h4>
<div style="text-align: justify;">
Jadi bagaimana dengan padding? Nah, padding adalah ruang 
horizontal dan vertikal yang diatur di sekitar area isi/konten dari 
elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di 
luar.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
Padding juga dapat dipahami sebagai "filling". Karena  padding tidak 
mempengaruhi jarak dari elemen ke elemen lainnya tetapi hanya 
mendefinisikan jarak inner antara tepi/border dan isi dari elemen. 
(lihat visual dibawah)</div>
<div style="text-align: justify;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzJR3GCiTnsEhPGUqFhXSAKTLBlEm3JYM41WXW39nG6cjNqNAcyJ94d5vDTIfuX46vOPAHE32QjudmAha7_hURI6C3gb7vv7v9nQ8vwJoDS6omZUGLYk51egE2TacP2kPbau9HJTXBjEMS/s1600/padding.png" style="margin-left: auto; margin-right: auto;"><img border="0" height="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzJR3GCiTnsEhPGUqFhXSAKTLBlEm3JYM41WXW39nG6cjNqNAcyJ94d5vDTIfuX46vOPAHE32QjudmAha7_hURI6C3gb7vv7v9nQ8vwJoDS6omZUGLYk51egE2TacP2kPbau9HJTXBjEMS/s640/padding.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">visual definisi padding</td></tr>
</tbody></table>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<div style="text-align: justify;">
Dari gambar diatas dapat diartikan padding adalah ruang yang diatur 
antara border/tepi dengan isi / konten dari suatu elemen (dalam hal ini 
isi konten berupa text).</div>
<div style="text-align: justify;">
Serupa dengan margin, padding juga diatur menggunakan properti 
padding "shorthand"  dan juga dapat dilakukan dengan properti 
padding "longhand": padding-top, padding-right, padding-bottom, dan padding-left.</div>
 
Contoh :
 
<pre>#element { padding: 10px; }/*padding untuk semua sisi sama 10px*/
#element { padding: 5px 10px 2px 4px; }/*padding: Top, Right, Bottom, Left*/ </pre>
 
<pre>#element { padding-top: 10px; padding-right: 5px; padding-bottom: 5px; padding-left: 10px;} </pre>
 
 
<div style="text-align: justify;">
Pengertian dari properti padding sama dengan  margin, cuma kalau padding bersifat inside
 space dari suatu elemen yang diatur disekitar area konten. Penerapannya
 padding sering dijumpai  hampir disemua elemen, sebagai contoh 
pengggunaan padding pada heading (h1, h2, h3....) di postingan.</div>
 
Contoh :
 
<pre>h1 { background: yellow;
padding: 20px 20px 20px 80px;}

h2 { background: orange;
padding-left:120px;}</pre>
 
Hasilnya pada postingan Anda akan seperti ini : 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJziYjGNGWs4ZDFrSv7oeyTDFFLqk8je_PN8H8tkv-lROPG6XDAG5MuWSwBUAuCMADr4pF8hUdbIUCqj8xeVX19LjUSpzDxhqU6tspcktXoJoI0oWrRZ1kHUH1iCW6i4XYKWLq8XA1WU1H/s1600/new-2.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="heading dan padding" border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJziYjGNGWs4ZDFrSv7oeyTDFFLqk8je_PN8H8tkv-lROPG6XDAG5MuWSwBUAuCMADr4pF8hUdbIUCqj8xeVX19LjUSpzDxhqU6tspcktXoJoI0oWrRZ1kHUH1iCW6i4XYKWLq8XA1WU1H/s640/new-2.gif" title="heading dan padding" width="640" /></a></div>
<h4>
Apa arti Border?</h4>
Border/garis tepi dapat digunakan untuk banyak hal, misalnya 
sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua
 hal. Border properti mendefinisikan width, color, and style dari batas
 area pada box/kotak. 
 
CSS memberi Anda pilihan dalam menggunakan border antara lain : 
<ul>
<li>border-style</li>
<li>border-width</li>
<li>border-color</li>
<li>border-individual</li>
</ul>
Border Style 
<div style="text-align: justify;">
Properti border-style untuk menentukan bentuk (style) dari tampilan border.</div>
<div style="text-align: justify;">
Tak satu pun dari properti border memiliki efek APAPUN kecuali telah menempatkan properti border-style dahulu!</div>
</div>
<div style="text-align: justify;">
Ada 9 type border-style values yang umum digunakan dalam CSS :</div>
<div style="text-align: justify;">
 
1. None : mendefinisikan tidak ada border 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7zzGflE51M6bHgCbtwGnMNHsciq3utLoF47NNPgtyfiKnqhyYwnlrvJnVcmn2D9yhv3CFnwkgYxis48jq4tYSmyHnBSeyEUJ9Dl-C0BZLIDZR4cY4-RKIxjOcXKg3qF3xVq1uQ_dvr-V/s1600/new-4.gif"><img alt="border style" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7zzGflE51M6bHgCbtwGnMNHsciq3utLoF47NNPgtyfiKnqhyYwnlrvJnVcmn2D9yhv3CFnwkgYxis48jq4tYSmyHnBSeyEUJ9Dl-C0BZLIDZR4cY4-RKIxjOcXKg3qF3xVq1uQ_dvr-V/s1600/new-4.gif" title="none" /></a> 
2. Dotted : berarti border berupa dot (titik) 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYk2yWX5BY-g4QAaGYbMVvqyk0EpI9dKCKJQ72sH82yK52GCQVv2KGatAh6MCrN18PJshSdSS9Kpc1WoqPEbxAXTBJH8RybRbr0HcnYb0kSOuEv5TG6n1kmdp9BsdFanb5j73AlRPGFDa1/s1600/new-5.gif"><img alt="Dotted" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYk2yWX5BY-g4QAaGYbMVvqyk0EpI9dKCKJQ72sH82yK52GCQVv2KGatAh6MCrN18PJshSdSS9Kpc1WoqPEbxAXTBJH8RybRbr0HcnYb0kSOuEv5TG6n1kmdp9BsdFanb5j73AlRPGFDa1/s1600/new-5.gif" title="Dotted" /></a> 
3. Dashed : border berupa dashed (garis putus-putus) 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9MQ0Uvp9BzEg1Ffja-2gXGMSZBQ_ET4euUnvZNTNMCSeWhR4rTUA6wzDoY9UxTrWjekvHpxldHOY6f_B5jTcqvnekxlX7TDXzmzMZcmp2OWfc2xpUCcLH8Iozamjn7xvk2depOW_fahxQ/s1600/new-3.gif"><img alt="Dashed" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9MQ0Uvp9BzEg1Ffja-2gXGMSZBQ_ET4euUnvZNTNMCSeWhR4rTUA6wzDoY9UxTrWjekvHpxldHOY6f_B5jTcqvnekxlX7TDXzmzMZcmp2OWfc2xpUCcLH8Iozamjn7xvk2depOW_fahxQ/s1600/new-3.gif" title="Dashed" /></a> 
<div>
4. Solid : border yang solid 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlvYmfktG9xsg2QVQOpTRpv-67bvloQTQzm4l5YyDnVavDh4l4t6RMYQYDDWCERmO3M_4vSVbgEOqZsESNmsqw47vCIsZu5OetaC3aemMVACyGgS6nZ0XZo4ioUCKZUniUjDkSnaeJJIB/s1600/new-6.gif"><img alt="Solid " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlvYmfktG9xsg2QVQOpTRpv-67bvloQTQzm4l5YyDnVavDh4l4t6RMYQYDDWCERmO3M_4vSVbgEOqZsESNmsqw47vCIsZu5OetaC3aemMVACyGgS6nZ0XZo4ioUCKZUniUjDkSnaeJJIB/s1600/new-6.gif" title="Solid " /></a> 
5. Double : mendefinisikan double border. Lebar double border adalah sama dengan nilai border-width 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCStnSBPeUNVVSuTWG3p3iuXQlUczSyWEKDdOLD7ZlAsTbxdYuuX4jrb2Dzc7XemWJyBKE47nscmjkxKjZh508s8UaYGOgXlAL-k0Df6eeVMViG9qlWKaUpRSglWD31BnOe_-hW5ljZl_h/s1600/new-7.gif"><img alt=" Double" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCStnSBPeUNVVSuTWG3p3iuXQlUczSyWEKDdOLD7ZlAsTbxdYuuX4jrb2Dzc7XemWJyBKE47nscmjkxKjZh508s8UaYGOgXlAL-k0Df6eeVMViG9qlWKaUpRSglWD31BnOe_-hW5ljZl_h/s1600/new-7.gif" title=" Double" /></a> 
6. Groove : mendefinisikan sebuah border groove (beralur) 3D. Efeknya tergantung pada nilai border-color 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCcWWtkDT8oEuIaYcEY__kFDFoFKzlbTMPGHv1BQi264OGH2w3rvtkKojG5Syn4_4I0UWcW9yz7DPkHKI9Yh0ryDIVUrtXEAzho2TqBoMpv5mnar7NRS7Xu_eYjPygqYEadlPEzKL7Ruq9/s1600/new-8.gif"><img alt="Groove" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCcWWtkDT8oEuIaYcEY__kFDFoFKzlbTMPGHv1BQi264OGH2w3rvtkKojG5Syn4_4I0UWcW9yz7DPkHKI9Yh0ryDIVUrtXEAzho2TqBoMpv5mnar7NRS7Xu_eYjPygqYEadlPEzKL7Ruq9/s1600/new-8.gif" title="Groove" /></a> 
7. Ridge: mendefinisikan sebuah border bergerigi (ridge) 3D. Efeknya tergantung pada nilai border-color 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVcldsDC4X7Oa6hQ8dswOGl6DskankeTZX-n8iL0UOEWYrpesb5vxIwkw7yUTZQaJl5OkkV52JrujLNsSpubj8NUq4yddKFbvyXUx6a6o3wV-R-WVO4yWv_MWa8UeFLzjP7LMvSNGTkPl2/s1600/new-9.gif"><img alt=" Ridge" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVcldsDC4X7Oa6hQ8dswOGl6DskankeTZX-n8iL0UOEWYrpesb5vxIwkw7yUTZQaJl5OkkV52JrujLNsSpubj8NUq4yddKFbvyXUx6a6o3wV-R-WVO4yWv_MWa8UeFLzjP7LMvSNGTkPl2/s1600/new-9.gif" title=" Ridge" /></a> 
8. Inset: mendefinisikan sebuah border inset 3D. Efeknya tergantung pada nilai border-color 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyShLRdSrVAlY7rd1YSQ2Z2DYugPF16MdFamTiWB-Qq2e9YW2Mm4vqQpw3O8Ndwv_49jyYXwBCxyOCoBFYwmzaaWmOvvYBpdtTgj26fyJC2bJzXKbQMT27ou7XV_2ww3RsfCgjV5dNtPj/s1600/new-10.gif"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyShLRdSrVAlY7rd1YSQ2Z2DYugPF16MdFamTiWB-Qq2e9YW2Mm4vqQpw3O8Ndwv_49jyYXwBCxyOCoBFYwmzaaWmOvvYBpdtTgj26fyJC2bJzXKbQMT27ou7XV_2ww3RsfCgjV5dNtPj/s1600/new-10.gif" /></a></div>
9. Outset : mendefinisikan sebuah border outset 3D. Efeknya tergantung pada nilai border-color 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI2Fj1HqWS_4fDTeSdbaFiWy2UVxjKkoyzRnxiyiO-ViSlIpUsEGIHEW5Fn2M9fZQopPZ6L8kgCWaQRhnD1K1xOjWsWGPnVvB9szZcVemal5qZ42SWMLhUoaTJPW6XYaU6udCkZa9KpAn4/s1600/new-11.gif"><img alt="Outset" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI2Fj1HqWS_4fDTeSdbaFiWy2UVxjKkoyzRnxiyiO-ViSlIpUsEGIHEW5Fn2M9fZQopPZ6L8kgCWaQRhnD1K1xOjWsWGPnVvB9szZcVemal5qZ42SWMLhUoaTJPW6XYaU6udCkZa9KpAn4/s1600/new-11.gif" title="Outset" /></a> 
 
Border Width 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
Properti border-width digunakan untuk mengatur lebar border/garis tepi.

Border diatur dalam pixel, atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan : thin, medium, dan thick.
</div>
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv36akTE3QH2NHLKNm9lPeOYuE7UZD6kw3z4d81Ed-PU65-lKbbEg21zddIsCO9y3ZzLFjKsyv_p7NKVuWVUzjwkknHQs83tkZEm035hDdxUj8B5INkxN4mv3caVaIqy9yozIeUqkOATTg/s1600/figure012+%25281%2529.gif" style="margin-left: auto; margin-right: auto;"><img alt="Border Width" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv36akTE3QH2NHLKNm9lPeOYuE7UZD6kw3z4d81Ed-PU65-lKbbEg21zddIsCO9y3ZzLFjKsyv_p7NKVuWVUzjwkknHQs83tkZEm035hDdxUj8B5INkxN4mv3caVaIqy9yozIeUqkOATTg/s640/figure012+%25281%2529.gif" title="Border Width" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">ukuran border dalam pixel dan value thin, medium, thick</td></tr>
</tbody></table>
 
Contoh :
 
 
<div class="pone">
p{
border-style:solid;
border-width:5px;
}</div>
 
<div class="ptwo">
p{
border-style:solid;
border-width:medium;
}</div>
 
<div class="pthree">
p{
border-style:solid;
border-width:1px;
}</div>
 
Border Color 
Properti border-color mendefinisikan warna yang dimiliki oleh border. 
Nilai-nilai yang normal penggunaan nilai warna misalnya: hex "# 123456",
 rgb "(123.123.123)" atau "blue". Anda juga dapat mengatur warna border 
menjadi "transparent". 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJCTc5o289B0bERSkPkfIk8my0URbVFQhZ5YzJQR0VPK-TP4_BQ-6Ye-AmOFU1E_FuljP6qgDtGjcsjOwYOLLjHEF8xAjbArru5CQjaRNVFx3UxS05TPsvMZb_euJodD66mItN2nVfy5en/s1600/figure013.gif" style="margin-left: auto; margin-right: auto;"><img alt="color chart" border="0" height="14" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJCTc5o289B0bERSkPkfIk8my0URbVFQhZ5YzJQR0VPK-TP4_BQ-6Ye-AmOFU1E_FuljP6qgDtGjcsjOwYOLLjHEF8xAjbArru5CQjaRNVFx3UxS05TPsvMZb_euJodD66mItN2nVfy5en/s400/figure013.gif" title="color chart" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://problogiz.blogspot.com/2012/09/kode-warna-html.html" target="_blank">chart warna hex</a></td></tr>
</tbody></table>
Contoh : 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPwbg35HfwUHasOky1BdX48ekUuUbFAvSAaa4jC5oy3oCsWYGxItsGhgTQMQik56AWkLIes6w4yfr51rk1mRnnO6pIqt7UWn-O1cu9PaUhYfNssU05qXAiypLinHMLndoQpVcafElxXc6/s1600/gbr1.gif" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Border Color " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPwbg35HfwUHasOky1BdX48ekUuUbFAvSAaa4jC5oy3oCsWYGxItsGhgTQMQik56AWkLIes6w4yfr51rk1mRnnO6pIqt7UWn-O1cu9PaUhYfNssU05qXAiypLinHMLndoQpVcafElxXc6/s1600/gbr1.gif" title="Border Color " /></a></div>
 
 
 
 
 
<div>
</div>
Border - Individual sides 
Dalam CSS Anda bisa juga menentukan border yang berbeda pada tiap sisi: 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22r3CgRWl77qsiN1y3K1qqPvf-RWbt8YaHCnJnlHOhy0Z_CMcdZhytJ9IS5Jdm1dlPRaf1fXhdDupoNAU-NVl9TKtTkbOjxBY4lC9MrECPdyJBdMSQj9b6powKvJ5BzMEiCTtU6l2SRLx/s1600/new-12.gif" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Border - Individual" border="0" height="41" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22r3CgRWl77qsiN1y3K1qqPvf-RWbt8YaHCnJnlHOhy0Z_CMcdZhytJ9IS5Jdm1dlPRaf1fXhdDupoNAU-NVl9TKtTkbOjxBY4lC9MrECPdyJBdMSQj9b6powKvJ5BzMEiCTtU6l2SRLx/s640/new-12.gif" title="Border - Individual" width="640" /></a></div>
 
 
 
 
Nah, gabungan dari pengaturan margin, padding dan border pada sebuah elemen dalam CSS sering disebut juga dengan "box model". 
Diagram di bawah ini menunjukkan bagaimana box model dibangun: 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJejv8bfeYiAa2lgKASNcsgTVLsX94ICCu0_bUKG4m5RYGfXHHbwlLYWpWsUjgCoKg_MpQTzVumImCAIAbFyX6lmImV4CRVjbwo6MCW40b9HIQpsnJIP4BiYT5fjlOrZYsCSeOvpi03at/s1600/css-box-model.gif" style="margin-left: auto; margin-right: auto;"><img alt="diagram model box" border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJejv8bfeYiAa2lgKASNcsgTVLsX94ICCu0_bUKG4m5RYGfXHHbwlLYWpWsUjgCoKg_MpQTzVumImCAIAbFyX6lmImV4CRVjbwo6MCW40b9HIQpsnJIP4BiYT5fjlOrZYsCSeOvpi03at/s640/css-box-model.gif" title="diagram model box" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">diagram model box</td></tr>
</tbody></table>
</div>
<div style="text-align: justify;">
Demikian penjelasan mengenai margin, padding dan border... mudah-mudahan dapat membantu buat para pemula.</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
Sumber : <a href="http://problogiz.blogspot.com/2012/12/pengertian-margin-padding-dan-border.html" target="_blank">problogiz</a> </div>
</div>

Penjelasan Margin, Padding, Border dalam CSS Topik kali ini mengenai CSS " Pengertian Margin, Padding, dan Border ". ten...

04:42 +

Cara membuat dan mendesain progress bar sendiri dengan CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbycWttad63chJLujRQh_UiPox6zIoastQQij9JCZLRpdikLacMtsXtBB4nXCbeeXZGb_ngluWeXO7RaPl5SMj2TydKYsXxgGfr_-i2UwUEV_3Gc98bCBeW1AopPrJUMKD6j8IIzZwBhM/s1600/5387e_21-35-gorgeous-progress-bars.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Cara membuat dan mendesain progress bar sendiri dengan CSS" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbycWttad63chJLujRQh_UiPox6zIoastQQij9JCZLRpdikLacMtsXtBB4nXCbeeXZGb_ngluWeXO7RaPl5SMj2TydKYsXxgGfr_-i2UwUEV_3Gc98bCBeW1AopPrJUMKD6j8IIzZwBhM/s1600/5387e_21-35-gorgeous-progress-bars.png" title="progress bar " width="320" /></a></div>
 
Wah gak terasa udah tahun 2015 dan baru update ne gara-gara di kul 
banyak tugas, (curhat dulu, hehhee). Setelah tugas dan UAS selesai admin
 duduk-duduk dan minum secangkir kopi sambil muter otak kira-kira mau 
update apa ya, emm, dan ahirnya saya tetapkan untuk buat tutorial desain
 progress. Untuk hal ini anda wajib ne mengenal siapa tu mbah jquery 
(library javascript),hahaha bagi yang belum sapa dulu, kenalan gitu sama
 mbah jquery. dan tentunya Css juga harus wajib mengerti, setidaknya 
basicnya.

Lanjut ke tutorial ya, siapkan editor kesayangan anda, apakah wajib? ya 
donk, lah kalau egak mau pake apa? maksudnya kesayangan? ya kalau gak 
sayang gak mood ngerjainnya nanti. 
Setelah itu buat halaman utamanya, masukkan kode HTML di bawah ini, dan 
jangan lupa library javascriptnya itu di atur dimana anda menaruhkan 
library.

<div id="kotakKode">
index.php
<div>
<pre class="prettyprint lang-html linenums prettyprinted"><ol class="linenums">
<li class="L0"><!DOCTYPE HTML></li>
<li class="L1"><head></li>
<li class="L2"> <meta http-equiv="content-type" content="text/html" /></li>
<li class="L3"> <meta name="author" content="mmlpro" /></li>
<li class="L4"> </li>
<li class="L5"> <script type="text/javascript" src="jquery-1.10.2.js"></script></li>
<li class="L6"> </li>
<li class="L7"> <title>desain progress</title></li>
<li class="L8"></head></li>
<li class="L9"> </li>
<li class="L0"><body></li>
<li class="L1"> </li>
<li class="L2"><h1>design progress by:mmlpro</h1></li>
<li class="L3"> </li>
<li class="L4"><div id="konten"></li>
<li class="L5"> <button value="25">25%</button></li>
<li class="L6"> <button value="50">50%</button></li>
<li class="L7"> <button value="75">75%</button></li>
<li class="L8"> <button value="100">100%</button></li>
<li class="L9"> <a class="run">Run</a></li>
<li class="L0"> </li>
<li class="L1"> <div id="progress">0%</div></li>
<li class="L2"></div></li>
<li class="L3"> </li>
<li class="L4"></body></li>
<li class="L5"></html></li>
</ol>
</pre>
</div>
</div>
Udah? cepet banget, padahal aku nulisnya aja lumayan beberapa menit. hehehe 
Sekarang cssnya silahkan dicopy. Simpan dengan nama style.css dan 
panggil css dengan cara external, taruh di dalam element head. Manggil 
cssnya seperti ini. 
<link href="style.css" rel="stylesheet"/>

<div id="kotakKode">
style.css
<div>
<pre class="prettyprint lang-css linenums prettyprinted"><ol class="linenums">
<li class="L0">body{margin:0;padding:0;background:#eeeeee;font-family: 'lucida grande',sans,verdana,arial,sans-serif;font-size:14px;color:#555555;}</li>
<li class="L1">h1{</li>
<li class="L2"> font-weight: normal;</li>
<li class="L3"> text-align: center;</li>
<li class="L4"> position: relative;</li>
<li class="L5">}</li>
<li class="L6">h1 sub{</li>
<li class="L7"> font-size: 12px;</li>
<li class="L8"> position: absolute;</li>
<li class="L9"> bottom:3px;</li>
<li class="L0">}</li>
<li class="L1">#konten{</li>
<li class="L2"> background-color: #ffffff;</li>
<li class="L3"> padding:10px 5px;</li>
<li class="L4"> width:400px;</li>
<li class="L5"> margin: 0 auto;</li>
<li class="L6">}</li>
<li class="L7">a{</li>
<li class="L8"> border:1px solid #bbb;</li>
<li class="L9"> background-color: #eeeeee;</li>
<li class="L0"> cursor: pointer;</li>
<li class="L1"> padding:0px 5px;</li>
<li class="L2"> position: relative;</li>
<li class="L3">}</li>
<li class="L4">a:after{</li>
<li class="L5"> content:"";</li>
<li class="L6"> position: absolute;</li>
<li class="L7"> top:0px;</li>
<li class="L8"> bottom:0px;</li>
<li class="L9"> right:-10px;</li>
<li class="L0"> border-left:10px #eeeeee solid;</li>
<li class="L1"> border-top:7px solid transparent;</li>
<li class="L2"> border-bottom:7px solid transparent;</li>
<li class="L3">}</li>
<li class="L4">a:before{</li>
<li class="L5"> content:"";</li>
<li class="L6"> position: absolute;</li>
<li class="L7"> top:-1px;</li>
<li class="L8"> bottom:-1px;</li>
<li class="L9"> right:-11px;</li>
<li class="L0"> border-left:11px #bbb solid;</li>
<li class="L1"> border-top:7px solid transparent;</li>
<li class="L2"> border-bottom:7px solid transparent;</li>
<li class="L3">}</li>
<li class="L4">button{</li>
<li class="L5"> border:1px solid #ccc;</li>
<li class="L6"> background-color: #eeeeee;</li>
<li class="L7"> cursor: pointer;</li>
<li class="L8">}</li>
<li class="L9">#progress{</li>
<li class="L0"> background-color: #f5f5f5;</li>
<li class="L1"> border:1px solid #ccc;</li>
<li class="L2"> margin: 10px 0px;</li>
<li class="L3"> border-radius: 7px;</li>
<li class="L4"> -webkit-border-radius: 7px;</li>
<li class="L5"> -moz-border-radius: 7px;</li>
<li class="L6"> border-radius: 7px;</li>
<li class="L7">}</li>
<li class="L8">#progress p{</li>
<li class="L9"> text-align: center;</li>
<li class="L0"> font-weight: bold;</li>
<li class="L1"> margin:0;</li>
<li class="L2"> padding:3px 0px;</li>
<li class="L3"> width:0;</li>
<li class="L4"> max-width: 100%;</li>
<li class="L5"> -webkit-border-radius: 7px;</li>
<li class="L6"> -moz-border-radius: 7px;</li>
<li class="L7"> border-radius: 7px;</li>
<li class="L8">}</li>
<li class="L9">.bgColor1{</li>
<li class="L0"> background-color: #DF8E84;</li>
<li class="L1"> color:#ffffff;</li>
<li class="L2">}.bgColor2{</li>
<li class="L3"> background-color: #C6DF84;</li>
<li class="L4"> color:#222;</li>
<li class="L5">}.bgColor3{</li>
<li class="L6"> background-color: #7ED777;</li>
<li class="L7"> color:#ffffff;</li>
<li class="L8">}</li>
</ol>
</pre>
</div>
</div>
Tambahkan script jquerynya seperti ini, taruh di file utama dan didalam element head seperti saat manggil css tadi.

<div id="kotakKode">

<div>
<pre class="prettyprint lang-javascript linenums prettyprinted"><ol class="linenums">
<li class="L0"> <script type="text/javascript"></li>
<li class="L1"> $(function(){</li>
<li class="L2"> var progress=$("#progress");</li>
<li class="L3"> var kontentProgress=$("#progress p");</li>
<li class="L4"> var button=$("button");</li>
<li class="L5"> var runaway=$(".run");</li>
<li class="L6"> var timer=null;</li>
<li class="L7"> </li>
<li class="L8"> //jalankan otomatis</li>
<li class="L9"> runaway.click(function(){</li>
<li class="L0"> var i;</li>
<li class="L1"> i=0;</li>
<li class="L2"> function tambahProgress(){</li>
<li class="L3"> i++;</li>
<li class="L4"> kontentProgress.css({"width":i+"%"}).text(i+"%");</li>
<li class="L5"> bgcolor(i);</li>
<li class="L6"> timer=setTimeout(tambahProgress, 50);</li>
<li class="L7"> if(i==100){</li>
<li class="L8"> clearTimeout(timer);</li>
<li class="L9"> kontentProgress.text("Loading selesai");</li>
<li class="L0"> }</li>
<li class="L1"> }</li>
<li class="L2"> timer=setTimeout(tambahProgress, 50);</li>
<li class="L3"> });</li>
<li class="L4"> </li>
<li class="L5"> //jika button diklik</li>
<li class="L6"> button.click(function(){</li>
<li class="L7"> clearTimeout(timer);</li>
<li class="L8"> var nilaiPersen=$(this).val();</li>
<li class="L9"> kontentProgress.css({"width":nilaiPersen+"%"}).text(nilaiPersen+"%");</li>
<li class="L0"> bgcolor(nilaiPersen);</li>
<li class="L1"> });</li>
<li class="L2"> </li>
<li class="L3"> </li>
<li class="L4"> //pengaturan bacground dan warna</li>
<li class="L5"> function bgcolor(nilai){</li>
<li class="L6"> if(nilai<35){</li>
<li class="L7"> kontentProgress.removeClass();</li>
<li class="L8"> kontentProgress.addClass("bgColor1");</li>
<li class="L9"> }else if(nilai>35 && nilai<60){</li>
<li class="L0"> kontentProgress.removeClass();</li>
<li class="L1"> kontentProgress.addClass("bgColor2");</li>
<li class="L2"> }else if(nilai>60 && nilai<=100){</li>
<li class="L3"> kontentProgress.removeClass();</li>
<li class="L4"> kontentProgress.addClass("bgColor3");</li>
<li class="L5"> }</li>
<li class="L6"> }</li>
<li class="L7"> });</li>
<li class="L8"> </li>
<li class="L9"> </script></li>
</ol>
</pre>
</div>
</div>
Nah coba di jalankan file uatamanya dengan browser kesayangan anda. 
Kalau aku sih pas buatnya makek google chrome (udah kebiasaan pakai 
google chrome) 
Gimana? Jalan atau tidak? jika ada yang eror bisa di tanyakan kok. iya, silahkan saja.

Keterangan :

Disini saya membuatnya untuk simulasi saja. Silahkan atur sendiri dari 
mana progress ini mendapatkan nilai, entah dengan cara eksekusi waktu 
ataupun dengan mendeteksi saat eksekusi file. Kalau di tutorial ini saya
 mengatur nilai progress dari value button dan juga dari looping di 
setTimout. 
Untuk bagian mendapatkan nilai dengan cara klik button, nilai persen di 
ambil dari value button yang di klik. Coba anda lihat discript jquery 
bagian button click. terdapat deklarasi variable seperti ini. 
var nilaiPersen=$(this).val();
 
Itu untuk mendapatkan nilai(value) dari button yang di klik. Nah untuk 
memasukkan nilai persen ke progressnya dan juga nilai panjangnya 
progress berjalan saya gunakan ini.
 
kontentProgress.css({"width":nilaiPersen+"%"}).text(nilaiPersen+"%");
 
Maksud dari script code di atas adalah mengatur panjang element p yang berada di dalam selector #progress menggunakan properti css width, dan megatur text di dalam element p.
 
Anda melihat ini? bgcolor(nilaiPersen);, itu saya gunakan untuk mengeksekusi Function bgcolor
 dan mengirimkan nilainya. Function ini saya gunakan untuk mengatur 
warna background dan text dan didalamnya terdapat if else statement yang
 akan menerima nilai progress dan mengubah warna progress setiap nilai 
yang sudah di tentukan di if else. Pengambilan/pengaturan warna dari 
progress saya gunakan teknik addClass dan removeClass yang nantinya akan
 menambah class keelement dan menghapus class dielement.

Di element run jika diklik progressnya akan berjalan sendiri saya 
gunakan setTimeout. Untuk memasukkan nilai ke progress tekniknya sama 
seperti tadi, cuma bedanya disini mendapatkan nilainya dari looping dan 
nantinya akan menghentikan setTimeout bila variable i sudah mencapai nilai 100 dengan tekik if statement condisi itu.
 
clearTimeout(timer); 
code inilah yang untuk menghentikan setTimeoutnya. Perhatikan deklarasi 
var yang di buat diatas sendiri, semua berhubungan dengan setTimoutnya 
kan maka clear timoutnya ditujukan ke timer.
 
Untuk perubahan warna sama seperti button klik tadi, memanggil function bgcolor(i); dan mengirimkan nilainya dari looping.

Yah, segitu aja yang diterangkan, jika ada yang kurang jelas bisa 
ditanyakan. Lewat facebook atau kontak lainnya. Terimakasih sudah 
berkunjung. 
 
<a href="https://app.box.com/s/lpd8bej8gij78956qscnyakj9c404zt6">DOWNLOAD </a> 
 
 
re-post from http://mmlpro.com/23/-membuat-dan-mendesain-progress-bar-sendiri.html 
</div>

Cara membuat dan mendesain progress bar sendiri dengan CSS

Wah gak terasa udah tahun 2015 dan baru update ne gara-gara di kul banyak tugas, (curhat dulu, hehhee). Setelah tugas dan UAS se...

05:40 +

Membuat efek kertas terselip dengan CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPtj2QeIUWihNc7A4wfFHVOozNPw_RiqX_NFHgtQzm9ZKBwUFVAkkq-n40GOIzVkP2Va5h2r5hTb5udjYxN_3Dvp7QJqv53JAOOSHOTZEY1aLZVaTY2J3tLTeBKOc3g45dGhakXkxszNP/s1600/thumb-efek-kertas-terselip.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPtj2QeIUWihNc7A4wfFHVOozNPw_RiqX_NFHgtQzm9ZKBwUFVAkkq-n40GOIzVkP2Va5h2r5hTb5udjYxN_3Dvp7QJqv53JAOOSHOTZEY1aLZVaTY2J3tLTeBKOc3g45dGhakXkxszNP/s1600/thumb-efek-kertas-terselip.jpg" width="200" /></a></div>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
 </div>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Efek yang akan kita buat pada tutorial ini adalah efek kertas yang terselip. Efek ini juga merupakan contoh lain dari penerapan Pseudo-Element Before dan After yang sebelumnya telah anda pelajari dalam tutorial berjudul “Mengenal lebih dalam CSS Pseudo Element” dan beberapa kasus yang pernah dibahas, seperti pada tutorial “Membuat CSS Tooltip”</div>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Kembali ke pembahasan utama, kali ini kita akan membuat sebuah efek kertas yang terselip ke dalam lubang. Berikut ini adalah screenshot dari efek yang kita bicarakan jika anda masih belum memiliki gambarannya.</div>
<div class="post-image" style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; margin: 20px 0px; padding: 20px; text-align: center;">
<img alt="Efek Kertas Terselip Preview" src="https://lh3.googleusercontent.com/-jPUTJyZxX6Y/UdDNZAQmCaI/AAAAAAAACIw/HHLEfSPtnXY/s800/01-07-2013%25207-28-40.png" style="margin: 0px; max-width: 100%; padding: 0px;" /></div>
<div class="post-image" style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; margin: 20px 0px; padding: 20px; text-align: center;">
<a class="button" href="https://dl.dropboxusercontent.com/u/26808427/cdn/ariona/demo/tucked-paper/index.html" style="background-color: #32beff; color: black; display: inline-block; margin: 0px; padding: 10px 20px; text-decoration: none;" target="_blank" title="Demonstrasi Efek Kertas Terselip">Demonstrasi</a></div>
<h2 style="background-color: white; font-family: 'Crete Round', Arial; font-weight: normal; margin: 0px 0px 20px; padding: 0px;">
Markup HTML</h2>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Untuk markup HTMLnya sederhana saja, kita hanya membutuhkan sebuah div sebagai objek kertas, saya beri kelas kertas pada div tersebut. Saya juga tambahkan sedikit random/dummy text pada kertas tersebut.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;"><div class="kertas">
 <h1>Lorem Ipsum Dolor Sit Amet</h1>
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut at consectetur officia et accusamus inventore dolor cupiditate tempore fuga alias aliquam quo dolorum voluptatem tenetur ipsum corporis commodi vitae! Iusto!
 
</div></pre>
<h2 style="background-color: white; font-family: 'Crete Round', Arial; font-weight: normal; margin: 0px 0px 20px; padding: 0px;">
CSS</h2>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Pertama-tama kita beri style terlebih dahulu kertas yang akan kita selipkan nantinya beserta background dari bodynya.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;">body{
 background:#d8d8d8;
}
.kertas{
 background:white;
 width:400px;
 margin:20px auto;
 padding:20px;
 position:relative;
 font-family:cambria,serif;
 box-shadow:0 1px 10px rgba(0,0,0,.3);
}</pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Selanjutnya adalah efek utama yang akan kita buat, Tekniknya sangat sederhana, kita buat tambahkan pseudo element pada class kertas, yang akan menjadi efek lubang untuk menyelipkan kertas.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;">.kertas::before, .kertas::after{
 background:#d8d8d8;
 content:"";
 width:100px;
 height:50px;
 position:absolute;
 top:-25px;
 box-shadow:0 5px 10px -7px rgba(0,0,0,.3);
}</pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
style tersebut akan membuat sebuah box yang akan kita gunakan untuk menutupi ujung-ujung kertas dan pada style selanjutnya kita akan mengatur rotasi dari tiap ujung.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;">.kertas::before{
 left:-50px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
.kertas::after{
 right:-50px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}</pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Silahkan simpan pekerjaan anda dan perhatikan apa yang ditampilkan dalam browser.</div>
<h2 style="background-color: white; font-family: 'Crete Round', Arial; font-weight: normal; margin: 0px 0px 20px; padding: 0px;">
Efek Selotip</h2>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Dengan teknik yang sama, kita juga bisa membuat efek kertas yang menempel dengan menggunakan <a href="https://www.google.com/search?q=selotip&tbm=isch&tbo=u&source=univ&sa=X&ei=A8XQUbvTJcTlrAfpxYGgAQ&ved=0CEYQsAQ" style="color: #ef8700; margin: 0px; padding: 0px; text-decoration: none;" title="Selotip">selotip</a> di setiap ujungnya. yang perlu kita lakukan hanyalah merubah tinggi dari pseudo element dan memberi background yang transparan</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;">.kertas::before, .kertas::after{
 background:rgba(255,255,255,.5);
 content:"";
 width:100px;
 height:25px;
 position:absolute;
 top:-10px;
 box-shadow:0 5px 10px -7px rgba(0,0,0,.3);
}</pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Dalam contoh di atas saya memberikan warna transparan dengan system rgba, anda bisa menggunakan background-image dan membuat gambar selotip yang lebih realistis.</div>
</div>

Efek yang akan kita buat pada tutorial ini adalah efek kertas yang terselip. Efek ini juga merupakan contoh lain dari penerapan Pseudo...

16:36 +

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;">
M-S Blog || Artikel ini akan membahas CSS3 2D Transformation, merupakan lanjutan artikel sebelumnya dengan judul Mengenal Transformasi di CSS3.</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;">
Translate, TranslateX, TranslateY</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;">
 </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;">
Scale, ScaleX, ScaleY </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">DEMO</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;">
Rotate</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;">
SkewX dan SkewY</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">DEMO Skew 2D Transformation</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;">
Transformasi Gabungan</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;">
Saya mau cancel Transformation, caranya gimana?</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;">
Source : http://www.tutorial-webdesign.com/css3-2d-transformation/</div>

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

02:56 +

M-S Blog

M-S Blog

M-S Blog

Penjelasan Margin, Padding, Border dalam CSS

Cara membuat dan mendesain progress bar sendiri dengan CSS

Membuat efek kertas terselip dengan CSS

Mengenal Transformasi 2D di CSS3

Popular Posts

Blog Archive