Tafsiran sifat putaran CSS: ubah dan putar-tutorial css-php.cn

Tafsiran sifat putaran CSS: ubah dan putar

WBOY

Lepaskan： 2023-10-20 18:02:44

asal

1653 orang telah melayarinya

CSS 旋转属性解读：transform 和 rotate

Tafsiran atribut putaran CSS: mengubah dan memutar, memerlukan contoh kod khusus

Pengenalan:
Dalam pembangunan bahagian hadapan, ia selalunya Gunakan CSS untuk mencapai kesan putaran elemen. CSS menyediakan pelbagai sifat putaran untuk dipilih, termasuk mengubah dan memutar. Artikel ini akan menerangkan kedua-dua sifat ini secara terperinci dan menyediakan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik cara melaksanakan kesan putaran.

1. Atribut Transform:
Atribut transformasi ialah sifat dalam CSS yang digunakan untuk menukar penampilan elemen. Terdapat banyak cara untuk mendapatkan nilai atribut transform, salah satunya adalah dengan menggunakan fungsi rotate() untuk berputar.

Sintaks atribut transformasi adalah seperti berikut:

transform: rotate(angle);

Salin selepas log masuk

di mana sudut mewakili sudut putaran, yang boleh menjadi nombor positif, nombor negatif atau peratusan.

Kod sampel adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <style>
        .rotate-box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="rotate-box"></div>
</body>
</html>

Salin selepas log masuk

Kelas .rotate-box dalam kod di atas mentakrifkan kotak segi empat sama dengan lebar 200px, ketinggian 200px dan warna latar belakang biru muda. Dengan menambahkan atribut transform: rotate(45deg) pada kotak, kesan putaran kotak 45 darjah mengikut arah jam dicapai.

2 Atribut Putar:
Atribut putar ialah sub-atribut transformasi dan digunakan secara khusus untuk mengawal kesan putaran elemen. Ia boleh digunakan secara langsung sebagai parameter atribut transform atau digunakan secara bersendirian. Atribut putar hanya boleh digunakan pada elemen peringkat blok.

Sintaks atribut putar adalah seperti berikut:

rotate: angle;

Salin selepas log masuk

di mana sudut mewakili sudut putaran, yang boleh menjadi nombor positif, nombor negatif atau peratusan.

Kod sampel adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <style>
        .rotate-box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            rotate: 45deg;
        }
    </style>
</head>
<body>
    <div class="rotate-box"></div>
</body>
</html>

Salin selepas log masuk

Kelas .rotate-box dalam kod di atas adalah sama seperti contoh sebelumnya, tetapi atribut rotate digunakan bukannya atribut transformasi. Dengan menambahkan putaran: 45deg pada gaya kotak, kesan putaran kotak 45 darjah mengikut arah jam juga dicapai.

3 Perbezaan antara transformasi dan putaran:
Atribut transformasi ialah atribut komprehensif yang boleh mencapai pelbagai kesan transformasi, termasuk putaran, penskalaan, terjemahan, dll. Atribut putar digunakan secara khusus untuk melaksanakan kesan putaran. Oleh itu, apabila anda hanya perlu melaksanakan kesan putaran, adalah disyorkan untuk menggunakan atribut putar Kod ini ringkas dan mudah difahami. Apabila pelbagai kesan transformasi perlu dilaksanakan pada masa yang sama, tetapan komprehensif boleh dibuat melalui atribut transformasi.

Kesimpulan:
Melalui tafsiran dan kod sampel artikel ini, kami telah mempelajari tentang dua sifat kesan putaran dalam CSS: mengubah dan berputar. Senario dan kaedah penggunaan masing-masing adalah berbeza Apabila menggunakannya, anda harus memilih atribut yang sesuai mengikut keperluan sebenar. Pada masa yang sama, melalui operasi dan latihan praktikal, anda boleh terus menguasai pelaksanaan kesan putaran dan meningkatkan kemahiran pembangunan bahagian hadapan anda.

Atas ialah kandungan terperinci Tafsiran sifat putaran CSS: ubah dan putar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!