Pada CSS3 kita dapat melakukan rotasi dari suatu element dengan properti transform. Tetapi saat ini implementasinya masih disesuaikan dengan masang-masing browser sehingga ada variasi property menjadi -moz-transform, -webkit-transfrom, -o-transform dan -ms-transform.
Sebagai contoh dapat dilihat pada 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>Rotate</title>
<style type=”text/css”>
#kotak
{
margin: 100px;
width: 400px;
height: 200px;
background-color: #888888;
}
#putar
{
width: 400px;
height: 200px;
background-color: #000000;
color: white;
padding: 20px;
font-size: 48px;
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
}
</style>
</head>
<body>
<div id=”kotak”>
<div id=”putar”>
Sekarang ada CSS3
</div>
</div>
</body>
</html>
Hasil coding dapat dilihat di http://aris.proweb.asia/rotate.html dengan tampilan seperti gambar di bawah ini:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.