Meskipun CSS3 tidak didukung di semua browser belum, banyak pengembang web telah mulai menggunakan beberapa teknik yang diberikannya. CSS3 telah berkembang menjadi teknologi yang, bila dikombinasikan dengan HTML5 dan JavaScript, mungkin berakhir menjadi Flash-pembunuh. Dalam seri artikel ini, kita akan membahas penambahan kunci untuk CSS3.dan hari ini kita akan melihat transformasi 2D.
CSS3 Mentransformasi
Salah satu penambahan favorit saya dengan kedatangan dari CSS3 adalah transformasi. Mereka memungkinkan Anda untuk menerapkan modifikasi vektor untuk elemen HTML pada halaman Anda. Anda dapat condong, skala dan memutar setiap elemen pada halaman. browser modern juga mendukung tranforms 3D, tapi itu di luar lingkup artikel ini dan kita akan melihat dalam artikel selanjutnya. Sebelum kita menyelam ke dalam melihat bagaimana masing-masing diimplementasikan, saya ingin memberitahu Anda bahwa sementara saya sangat bersemangat untuk menggunakan properti ini.
Condong
Skewing seperti memutar elemen. Ini adalah efek yang dapat diterapkan ke objek sebagai gaya atau untuk memberikan kesan itu menjadi dalam perspektif. Dengan CSS3, sangat sederhana untuk condong setiap elemen. Berikut adalah contoh dari bagian miring:
Berikut adalah kode yang digunakan untuk menghasilkan contoh di atas:
.skewed {Sayangnya masing-masing browser memiliki nama properti mereka sendiri yang harus digunakan. Tidak seperti banyak sifat lainnya setidaknya semua browser menerima parameter yang sama untuk properti condong.
-webkit-transform: condong (30deg);
-moz-transform: condong (30deg);
-o-transform: condong (30deg);
-MS-transform: condong (30deg);
transform: condong (30deg);
}
Skala
Scaling adalah properti yang menarik di CSS3 dan memiliki beberapa kegunaan. Misalnya - katakanlah Anda sedang membangun sebuah grid gambar untuk galeri gambar. Ketika pengguna melayang gambar tertentu, Anda ingin gambar itu untuk meningkatkan. Dengan properti skala CSS3, Anda tidak perlu menulis Javascript untuk melaksanakan fungsi ini.
Berikut adalah kode yang digunakan untuk menghasilkan contoh di atas:
.grid a {
width: 100px;
height: 60px;
font-size: 32px;
border: 1px # 900 padat;
margin: 0 20px 20px 0;
text-align: center;
padding-top: 40px;
float: kiri;
z-index: 1;
position: relative;
text-decoration: none;
color: # 900;
-webkit-transform: skala (1);
-moz-transform: skala (1);
-o-transform: skala (1);
-MS-transform: skala (1);
transform: skala (1);
}
.grid a: hover {
border: 1px # 000 padat;
background: #eee;
z-index: 2;
-webkit-transform: skala (1,5);
-moz-transform: skala (1,5);
-o-transform: skala (1,5);
-MS-transform: skala (1,5);
transform: skala (1,5);
}
Memutar
Rotasi mungkin adalah transisi bahwa Anda akan menemukan yang paling berguna. Karena itu, ingatlah bahwa teks diputar mungkin tidak membuat sangat baik pada kebanyakan browser. Jadi berhati-hati menggunakannya terlalu sering. Seperti disebutkan di atas, saya masih lebih suka pergi dengan gambar, bukan berputar teks. Berikut adalah beberapa contoh implementasi berguna transformasi rotate.
Berikut adalah kode yang digunakan untuk menghasilkan contoh di atas:
.tab {
-webkit-transform: rotate (-90deg);
-moz-transform: rotate (-90deg);
-o-transform: rotate (-90deg);
-MS-transform: rotate (-90deg);
transform: memutar (-90deg);
}
.badge {
-webkit-transform: rotate (-45deg);
-moz-transform: rotate (-45deg);
-o-transform: rotate (-45deg);
-MS-transform: rotate (-45deg);
transform: memutar (-45deg);
}
Gabungan Transformasi
Kadang-kadang Anda ingin menggabungkan lebih yang pada transformasi. Anda dapat mendefinisikan masing-masing di baris terpisah atau memperpendek definisi dan menentukan mereka dalam baris yang sama seperti di bawah ini:
.rotate-condong skala {
transform: condong (30deg) skala (0,5, 0,5) memutar (40deg);
}
Kompatibilitas Browser
Transformasi properti didukung pada browser berikut:
Internet Explorer 9 +
Firefox 3.5+
Safari 3.2+
Chrome 10.0+
Kesimpulan
Jadi itu sekitar 2 transisi dimensi. Sementara yang kuat, saya akan mengatakan bahwa masih ada beberapa waktu sebelum itu benar-benar dapat digunakan karena beberapa alasan. Pertama, seperti yang saya sebutkan anti-aliasing tidak besar; jadi saya tidak akan merekomendasikan berputar dan miring teks. Kedua, posisi diputar teks adalah sedikit masalah. Jika Anda melihat kode sumber untuk contoh rotasi, Anda akan melihat berapa banyak kita harus men-tweak posisi untuk menyelaraskan objek diputar. Namun, saya benar-benar senang melihat transformasi yang termasuk dalam versi ini CSS3.
