Bagaimana Menggunakan Transformasi CSS dengan sebaik-baiknya?

Dalam artikel ini kita akan memahami Transform In secara terperinci dan ikuti dengan demonstrasi praktikal terperinci. Petunjuk berikut akan dibahas dalam artikel ini,

• Apa itu CSS transform?
• Apakah pelbagai sifat transformasi?

Dengan kemajuan dalam fungsi laman web, adalah sama pentingnya untuk menyediakan integrasi pintar di laman web anda untuk menjadikannya menarik dan lebih baik. Menambah pelbagai elemen CSS yang memuji laman web anda adalah keperluan masa.
Orang ramai tidak menggunakan laman web yang tidak begitu menarik perhatian orang ramai. Jadi, bagaimana dengan cuba mengubah beberapa elemen dan memperindah CSS anda dengan nilai mampatan yang lebih rendah.
Untuk memenuhi keperluan yang serupa, kami telah mengubah harta benda CSS yang mengubah elemen dengan mengubah, memutar, menskalakan, atau menerjemahkannya.

Teruskan dengan artikel ini mengenai Transform In CSS

Apa itu CSS transform?

Mengubah elemen CSS bermaksud memberikan kelebihan dalam bentuk 2D atau 3D. Ini secara visual mengubah gaya elemen.
Transformasi 2D berfungsi pada paksi X dan Y. Anda boleh memberikan kelebihan atau struktur pada kedua paksi untuk membuat perubahan. Sementara untuk transformasi 3D, ia perlu berfungsi pada paksi X, Y dan Z untuk memberikan kedalaman yang diperlukan.

Ciri-ciri transformasi CSS 2D:

cara menghentikan program di java

Ciri-ciri transformasi 3D CSS:

Sebagai contoh:

css .element {width: 20px height: 20px transform: scale (20)}

Sekarang, apabila anda melakukannya, elemen yang ditentukan akan dikira 20 kali.

Bukan hanya ini, anda juga dapat mengukur skala sumbu untuk skala mendatar dan skala menegak.

ubah: skalaX (2) ubah: skalaY (.5)

Untuk memberikan transformasi yang betul di semua penyemak imbas, anda boleh:

div {-webkit-transform: skala (1.5) -moz-transform: skala (1.5) -o-transform: skala (1.5) transform: skala (1.5)}

Properti CSS transformasi meningkatkan ruang koordinat tahap pemformatan visual CSS.
Apakah tahap pemformatan visual?
Tahap pemformatan visual bermaksud memproses dokumen dan memaparkannya 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 segi empat tepat yang menentukan ukuran, kedudukan, dan sifat.
Catatan: Hanya elemen yang dapat diubah yang dapat diubah.

Teruskan dengan artikel ini mengenai Transform In CSS

Apakah pelbagai sifat transformasi?

Mari lihat semua sifat transformasi:

1. skala (): Penskalaan bermaksud mengubah ukuran elemen sama ada secara mendatar atau menegak.

Untuk skala menegak:skalaX

Untuk skala mendatar:skalaY

Untuk elemen, anda juga dapat mengubah ukuran font, padding, tinggi, atau lebar. Nilai lalai adalah 1 yang juga bermaksud memberikan 0.5 kerana nilainya menjadi separuh sementara memberikan skala 2 kali ganda.

2. condong (): Properti skew membolehkan pengguna memiringkan elemen ke kanan atau kiri dari satu titik koordinat. Ia seperti mengubah segi empat tepat menjadi parallelogram. Anda boleh mencondongkan elemen dengan koordinatnya.

Contoh:

.element {transform: skewX (25deg)} .element {transform: skewY (25deg)

Apabila anda melakukannya, elemen melengkung 25 darjah secara mendatar dan menegak dengan menggunakan skewX atau skewY.

3. putar ( ) : Anda boleh memutar elemen mengikut arah jam dengan menggunakan sifat ini. Anda boleh memutarnya 180 darjah atau 360 darjah untuk mengembalikannya ke tempat asalnya.

.element {transform: rotate (25deg)}

Untuk memberikan putaran juga, anda boleh menggunakan salah satu daripada tiga dimensi: rotateX, rotateY, atau rotateZ.

4. terjemahkan ( ) : Anda dapat menggerakkan elemen dengan betul terbalik atau ke samping.

.element {transform: translate (20px, 10px)}

Terjemahan akan menggerakkan objek / elemen yang ditentukan terbalik atau ke samping. Nilai yang ditentukan pertama menggerakkan objek ke kanan (negatif akan menggerakkannya ke kiri) dan nilai kedua menggerakkannya ke bawah (menentukan nilai negatif akan menggerakkannya ke atas).

Sekiranya ini mengelirukan anda, gunakan paksi X untuk mengubah kedudukan elemen secara mendatar dan paksi Y untuk mengubah kedudukan secara menegak. Aspek yang paling menakjubkan mengenai harta transformasi ialah, menerapkan transformasi hanya akan membolehkan elemen bergerak, menjaga setiap elemen atau teks yang lain tetap utuh. Jarak biasanya diambil dalam piksel atau peratusan.

Sebagai contoh:

.element {transform: translateX (value) transform: translateY (nilai)}

5. perspektif (): Anda dapat memberikan kedalaman dalam perspektif elemen. Ia memungkinkan untuk memberikan transformasi 3D ke elemen dengan menjadikannya berbentuk kubik dalam transformasi.
terjemahkan3d (x, y, z)
terjemahkanZ (z)

php mysql_fetch_

translate3d (x, y, z) translateZ (z)

Pengenalan paksi z memberikan elemen visualisasi 3D. translateZ () menggerakkan elemen ke arah penonton sementara nilai negatif memindahkannya.

6. matriks () : Gabungkan semua transformasi menjadi satu.

putar (45deg) terjemahkan (24px, 25px)

Menerapkan matriks () menggabungkan semua sifat transform dalam satu array.

Menggunakan sifat transformasi dapat meningkatkan elemen anda dan oleh itu laman web anda menarik. Cubalah!

Ini membawa kita ke akhir artikel ini mengenai Transform In CSS.

Sekiranya anda berminat untuk mempelajari lebih lanjut mengenai pengembangan web, lihat oleh Edureka. Latihan Pensijilan Pembangunan Web akan membantu anda Mempelajari cara membuat laman web yang mengagumkan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery dan Google API dan menyebarkannya ke Amazon Simple Storage Service (S3).

Sekiranya anda masih berminat Sekiranya anda mempunyai pertanyaan, anda boleh menghantarnya di bahagian komen blog 'Apa itu CSS' ini, dan kami akan menghubungi anda secepat mungkin.