Dengan CSS3 kita bisa membuat efek skew. Untuk membuat efek skew kita menggunakan property
- transform: skewX
Ini merupakan skew ke arah horizontal.
Dalam penerapan ke broswser-browser, saat ini menggunakan variasi -moz-transform: skewX, -webkit-transform: skewX, -o-transform: skewX dan -ms-transform: skewX - transform: skewY
Ini merupakan skew ke arah vertikal.
Dalam penerapan ke broswser-browser, saat ini menggunakan variasi -moz-transform: skewY, -webkit-transform: skewY, -o-transform: skewY dan -ms-transform: skewY
Sebagai contoh adalah coding berikut ini:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Skew</title>
<style type=”text/css”>
#kotak1,#kotak2
{
margin: 100px;
width: 400px;
height: 100px;
background-color: #888888;
}
#miring1,#miring2
{
width: 360px;
height: 60px;
background-color: #000000;
color: white;
padding: 20px;
font-size: 28px;
}
#miring1
{
-moz-transform: skewX(30deg);
-webkit-transform: skewX(30deg);
-ms-transform: skewX(30deg);
-o-transform: skewX(30deg);
}
#miring2
{
-moz-transform: skewY(20deg);
-webkit-transform: skewY(20deg);
-ms-transform: skewY(20deg);
-o-transform: skewY(20deg);
}
</style>
</head>
<body>
<div id=”kotak1″>
<div id=”miring1″>
Sekarang ada CSS3 bagian 1
</div>
</div>
<div id=”kotak2″>
<div id=”miring2″>
Sekarang ada CSS3 bagian 2
</div>
</div>
</body>
</html>
Hasil dari coding tersebut dapat dilihat di http://aris.proweb.asia/skew.html dengan tampilan seperti gambar berikut ini:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.