CSS3 box / gambar doyong ( transform skew ) `

bagaimanakah cara mendoyongkan atau membuat box element div / gambar anda miring .. dan apa sih CSS3 2D transform skew ..?

CSS memanipulasi isi / content dan bentuk pada box element div . atau anda juga bisa di terapkan pada file gambar . seperti yang sudah mastony jelasin kemaren pada waktu posting mengenai CSS3 2D transform rotate transform adalah suatu property dari CSS3 dan skew sebagai function , nah function skew inilah yang berfungsi untuk membengkokkan / memiringkan sudut box anda seperti jajaran genjang .
sementara degrees ( deg ) sebagai value nya .baiklah kita akan menggunakan gambar dibawah ini sebagai bahan uji coba :
Gambar Original :


sedangkan untuk dukungan browser , property ini support pada semua browser hanya saja kita menambahkan sedikit kode agar lebih mudah terbaca oleh browser :
mozilla menggunakan -moz-
opera menggunakan -o-
Internet Explore menggunakan -ms-
safari dan chrome menggunakan -webkit-

property:function value;
transform:skew( deg )

Gambar mengikuti aturan CSS dengan property transform ,function skew dan value ( 20deg,10deg)

CSS style dan html

<style>.GambarSkew1{transform:skew(20deg,10deg);-moz-transform:skew(20deg,10deg);-o-transform:skew(20deg,10deg);-webkit-transform:skew(20deg,10deg);-ms-transform:skew(20deg,10deg);}</style>
<div class="GambarSkew1">
<img alt="gambar bengkok" src="https://sites.google.com/site/mas4nton/icon-blog/lukisan%20skew.png" /></div>

Note : untuk nilai value 20 degrees bengkok pada area Horizontal yaitu kiri ke kanan( X-axis ) , dan nilai value 10 degrees bengkok pada area vertical yaitu dari atas ke bawah ( Y-axis )
anda juga dapat menyesuaikan bagian mana yang akan di bengkokkan , horizontal atau vertical

Gambar bengkok / doyong di area horizontal ( X-axis )

kita akan membuat gambar miring di area horizontal atau benkok dari kiri ke kanan dengan value 15 degrees dan sedangkan pada vertical kita buat 0 degrees .

<style>.GambarSkewX{transform:skew(15deg,0deg);-moz-transform:skew(15deg,0deg);-o-transform:skew(15deg,0deg);-webkit-transform:skew(15deg,0deg);-ms-transform:skew(15deg,0deg);}</style>
<div class="GambarSkewX">
<img  src="https://sites.google.com/site/mas4nton/icon-blog/lukisan%20skew.png" /></div>

untuk menyesuaikan gambar / box doyong ke kiri atau ke kanan silahkan ubah pada nilai valuenya contoh : 15 degrees di ubah menjadi -15 degrees .
seperti gambar di bawah ini :

Gambar bengkok / doyong di area vertical ( Y-axis )

anda juga dapat membuat file gambar anda doyong pada area vertical yaitu dari atas ke bawah ( Y-axis ) dengan value 15 degrees .

CSS dan html nya sebagai berikut ini :

<style>.GambarSkewY{transform:skew(0deg,15deg);-moz-transform:skew(0deg,15deg);-o-transform:skew(0deg,15deg);-webkit-transform:skew(0deg,15deg);-ms-transform:skew(0deg,15deg);}</style>
<div class="GambarSkewY">
<img alt="doyong ke kanan" src="https://sites.google.com/site/mas4nton/icon-blog/lukisan%20skew.png" /></div>

padahal itu semua dapat di lakukan dengan editor gambar , tapi bagaimana dengan box element div tentu saja kesulitan , dengan CSS akan jadi sangat mudah .

membengkokkan / jadi doyong pada
box / element div

kita akan membuat box berukuran lebar 150px dan tinggi 50px dan menggunakan value X-axis -10px , berikut ini contohnya :

box Skew-X

hasil box di atas seperti berikut ini CSS dan html nya :

<style>.boxSkewX{width:150px;height:50px;margin:15px 0 15px 15px;padding:10px;background:skyBlue;color:white;font-size:14px;font-weight:bold;text-shadow:0 1px 2px#444444;box-shadow:-1px 2px 3px#444444,0 0 6px#87A9D6;-webkit-box-shadow:-1px 2px 3px#444444,0 0 px#87A9D6;transform:skew(-15deg,0deg);-moz-transform:skew(-15deg,0deg);-o-transform:skew(-15deg,0deg);-webkit-transform:skew(-15deg,0deg);-ms-transform:skew(-15deg,0deg);border:2px solid #fff;-radius:10%;-o-border-radius:10%;-webkit-border-radius:10%;-moz-border-radius:10%;}</style>
<div class="boxSkewX">box Skew-X</div>

nah gimana .. mantabs ndak ? , oke untuk box-shadow atau efek bayangan anda bisa baca disini Efek bayangan shadow , dan munkin barang kali anda membutuhkan border-radius atau membuat sudut box jadi lengkung silahkan anda membaca disini ..Rounded corner pada border dan andapun juga dapat menyesuaikan jenis atau model border disini .. CSS nama / style border .. untuk pilihan warna background ataupun warna pada border silahkan anda tentukan dengan COLOR disini disini
dan dari sini tutorial mengenai transform:skew ini selesai .. selamat mencoba ... dan ku tunggu likenya disini Komunitas Belajar

Terima kasih Anda telah membaca Artikel mengenai CSS3 box / gambar doyong ( transform skew ) dan Kata kunci untuk Artikel ini yaitu CSS3 box / gambar doyong ( transform skew )