CSS atau Cascading Style Sheet, merupakan kumpulan dari gaya yang akan diterapkan pada suatu ciri tertentu didalam elemen html. Banyak sekali dari CSS ini yang bisa dipergunakan, seperti membuat teks tebal, ukuran font, warna dan masih banyak lagi. Di versi 3 sekarang, css sudah mendukung rotasi dimana setiap elemen bisa di rotasi. Bukan hanya gambar. Bagaimana cara melakukanya? lihat selengkapnya.
Membuat HTML
Sebelum melanjutkan, alangkah baiknya kita membuat dulu file htmlnya.
<html>
<head>
<title>Tes Rotasi</title>
<style>
/*dengan id*/#rotasigambarid {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
/*dengan class*/.rotasigambar {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
</style>
</head>
<body>
<h3>Gambar Asal</h3>
<img src="https://nyingspot.b-cdn.net/wp-content/themes/nyingspot/assets/images/homepage/artikel-tentang-magento.jpg" style="width: 100px" />
<h3>Gambar di rotasi dengan id</h3>
<img id="rotasigambarid" src="https://nyingspot.b-cdn.net/wp-content/themes/nyingspot/assets/images/homepage/artikel-tentang-magento.jpg" style="width: 100px" />
<h3>Gambar di rotasi dengan class</h3>
<img class="rotasigambarid" src="https://nyingspot.b-cdn.net/wp-content/themes/nyingspot/assets/images/homepage/artikel-tentang-magento.jpg" style="width: 100px" />
</body>
</html>
Kode CSS
Berikut ini adalah kode CSSNya saja
/*dengan id*/#rotasigambarid {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
/*dengan class*/.rotasigambar {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
Contoh
Berikut ini adalah gambar contoh dari penerapan dari kode html dibawah ini:
Pertanyaan yang sering ditanyakan
P: Apakah semua kode itu harus di include seperti -webkit…?
J: Iya, jadi -webkit- itu untuk browser yang based on webkit. Sementara transform hanya untuk yang berbasis chrome.
P: Apakah mobile support juga?
j: Tidak semua mobile browser support, tapi ada beberapa yang support juga.
P: Jika tidak support, apakah ada alternatif
J: Ada, kita bisa langsung rotate gambarnya di photoshop
Demikian Semoga membantu.