Pada artikel ini kita akan memahami Transformasi secara rinci dan menindaklanjutinya dengan demonstrasi praktis yang mendetail. Petunjuk berikut akan dibahas dalam artikel ini,
Dengan kemajuan dalam fungsi situs web, sama pentingnya untuk menyediakan integrasi yang cerdas di situs web Anda untuk membuatnya menarik dan lebih baik. Menambahkan berbagai elemen CSS yang melengkapi situs Anda adalah kebutuhan saat ini.
Orang-orang menghindari situs web yang tidak benar-benar menarik bagi massa. Jadi, bagaimana kalau mencoba mengubah beberapa elemen dan mempercantik CSS Anda dengan nilai kompresi yang lebih rendah.
Untuk memenuhi kebutuhan serupa, kami telah mengubah properti CSS yang mengubah elemen dengan cara memiringkan, memutar, menskalakan, atau menerjemahkannya.
Pindah dengan artikel ini tentang Transformasi Dalam CSS
Apa itu transformasi CSS?
Mengubah elemen CSS berarti memberikan keunggulan dalam bentuk 2D atau 3D. Ini secara visual mengubah gaya elemen.
Transformasi 2D bekerja pada sumbu X dan Y. Anda dapat memberikan tepi atau struktur apa pun pada kedua sumbu untuk membuat perubahan. Sedangkan untuk transformasi 3D, perlu bekerja pada sumbu X, Y serta Z untuk memberikan kedalaman yang dibutuhkan.
Properti transformasi CSS 2D:
| Fungsi | Deskripsi |
matriks( n, n, n, n, n, n ) | Matriks enam nilai |
menterjemahkan( x, y ) | Mengizinkan elemen untuk bergerak di sepanjang sumbu X dan Y. |
translateX ( n ) | Mengizinkan elemen untuk bergerak di sepanjang sumbu X. |
translateY ( n ) | Mengizinkan elemen untuk bergerak di sepanjang sumbu Y. |
skala( x, y ) | Mengubah lebar dan tinggi elemen |
scaleX ( n ) | Mengubah lebar elemen |
scaleY ( n ) | Mengubah tinggi elemen |
memutar( sudut ) | Memungkinkan untuk memutar elemen dalam sudut yang ditentukan dalam parameter |
condong( sudut x, sudut y ) fibonacci di c ++ | Miringkan elemen di sepanjang sumbu X dan Y. |
skewX ( sudut ) | Miringkan elemen di sepanjang sumbu X. |
miring ( sudut ) | Memiringkan elemen di sepanjang sumbu Y. |
Properti transformasi 3D CSS:
Properti | Deskripsi |
mengubah | Menerapkan transformasi 2D atau 3D ke elemen |
transformasi-asal | Memungkinkan Anda mengubah posisi pada elemen yang diubah |
gaya transformasi | Menentukan bagaimana elemen bersarang dirender dalam ruang 3D |
perspektif | Menentukan perspektif tentang bagaimana elemen 3D dilihat |
perspektif-asal | Menentukan posisi bawah elemen 3D jenis transformasi di informatica |
visibilitas ke belakang | Mendefinisikan apakah sebuah elemen harus terlihat atau tidak saat tidak menghadap layar |
Sebagai contoh:
css .element {width: 20px height: 20px transform: scale (20)}Sekarang, saat Anda melakukannya, elemen yang ditentukan akan diskalakan sebanyak 20 kali.
Tidak hanya itu, Anda juga dapat menskalakan sumbu untuk penskalaan horizontal dan penskalaan vertikal.
transform: scaleX (2) transform: scaleY (.5)
Untuk memberikan transformasi yang tepat di semua browser, Anda dapat:
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}Properti transformasi CSS meningkatkan ruang koordinat tingkat pemformatan visual CSS.
Apa tingkat pemformatan visual?
Level pemformatan visual berarti memproses dokumen dan menyajikannya secara visual di platform media. Dengan pemformatan visual, Anda dapat mengubah setiap elemen sebagai model yang sesuai dengan model kotak CSS. Model kotak CSS mendefinisikan elemen dalam format kotak persegi panjang standar yang menentukan ukuran, posisi, dan properti.
catatan: Hanya elemen yang dapat diubah yang dapat diubah.
Pindah dengan artikel ini tentang Transformasi Dalam CSS
Apa sajakah properti transformasi?
Mari kita lihat semua properti transformasi:
1. skala (): Penskalaan artinya mengubah ukuran elemen baik secara horizontal maupun vertikal.
Untuk penskalaan vertikal:scaleX
Untuk penskalaan horizontal:scaleY
Untuk elemen, Anda juga dapat mengubah ukuran font, padding, tinggi, atau lebar. Nilai defaultnya adalah 1 yang juga berarti memberikan 0,5 karena nilainya membelah dua sekaligus memberikan 2 kali penskalaan.
2. condong (): Properti skew memungkinkan pengguna untuk memiringkan elemen ke kanan atau kiri dari satu titik koordinat. Ini hampir seperti mengubah persegi panjang menjadi jajaran genjang. Anda dapat memiringkan elemen dengan koordinatnya.
menggabungkan implementasi sortir c ++
Contoh:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)Saat Anda melakukannya, elemen miring 25 derajat secara horizontal dan vertikal dengan menggunakan skewX atau skewY.
3. putar ( ) : Anda dapat memutar elemen searah jarum jam dengan menggunakan properti ini. Anda dapat memutarnya 180 derajat atau 360 derajat untuk mengembalikannya ke tempat semula.
.element {transform: rotate (25deg)}Untuk menyediakan rotasi juga, Anda dapat menggunakan salah satu dari tiga dimensi: rotateX, rotateY, atau rotateZ.
4. terjemahkan ( ) : Anda dapat memindahkan elemen dengan benar ke atas atau ke samping.
.element {transform: translate (20px, 10px)}Terjemahan akan memindahkan objek / elemen yang ditentukan ke atas atau ke samping. Nilai yang ditentukan pertama memindahkan objek ke kanan (negatif akan memindahkannya ke sisi kiri) dan nilai kedua memindahkannya ke bawah (menentukan nilai negatif akan memindahkannya ke atas).
Jika ini membingungkan Anda, terapkan sumbu X untuk mengubah posisi elemen secara horizontal dan sumbu Y untuk mengubah posisi secara vertikal. Aspek yang paling menakjubkan tentang properti transformasi adalah, menerapkan transformasi hanya akan memungkinkan elemen untuk bergerak, menjaga setiap elemen atau teks lainnya tetap utuh. Jarak biasanya diambil dalam piksel atau persentase.
Sebagai contoh:
.element {transform: translateX (value) transform: translateY (value)}5. perspektif (): Anda bisa memberikan kedalaman perspektif suatu elemen. Ini memungkinkan untuk memberikan transformasi 3D ke elemen dengan membuatnya berbentuk kubus dalam transformasi.
translate3d (x, y, z)
translateZ (z)
translate3d (x, y, z) translateZ (z)
Pengenalan sumbu z memberi elemen visualisasi 3D. translateZ () memindahkan elemen ke arah penampil sementara nilai negatif menjauhkannya.
6. matriks () : Gabungkan semua transformasi menjadi satu.
putar (45deg) terjemahkan (24px, 25px)
Menerapkan matrix () menggabungkan semua properti transformasi dalam satu larik.
Menerapkan properti transformasi dapat sangat meningkatkan elemen Anda dan karenanya menarik situs web Anda. Cobalah!
Ini membawa kita ke akhir artikel ini tentang Transformasi Dalam CSS.
Jika Anda tertarik untuk mempelajari lebih lanjut tentang pengembangan web, lihat oleh Edureka. Pelatihan Sertifikasi Pengembangan Web akan membantu Anda Mempelajari cara membuat situs web yang mengesankan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery, dan Google API, serta menerapkannya ke Amazon Simple Storage Service (S3).
Jika Anda masih tertarik Jika Anda memiliki pertanyaan, Anda dapat mempostingnya di bagian komentar di blog 'Apa itu CSS', dan kami akan menghubungi Anda sesegera mungkin.