Salah satu ciri CSS yang paling berkuasa ialah keupayaan untuk menggunakan berbilang transformasi pada elemen, yang boleh digunakan untuk mencipta kesan visual dan animasi yang menakjubkan. Dalam artikel ini, kami akan membincangkan cara menggunakan sifat transformasi berbilang pada elemen menggunakan CSS dan memberikan contoh cara memanfaatkan teknik ini untuk meningkatkan pengalaman pengguna tapak web anda.
Kami akan merangkumi sintaks asas sifat transformasi, serta teknik yang lebih maju seperti transformasi bersarang dan menggunakan pelbagai transformasi untuk mencipta animasi yang kompleks. Sama ada anda seorang pemula atau pembangun web yang berpengalaman, artikel ini akan memberikan anda pengetahuan dan kemahiran yang anda perlukan untuk membawa kemahiran CSS anda ke peringkat seterusnya.
CSS transform Sifat membolehkan pembangun menggunakan pelbagai transformasi pada elemen HTML, seperti penskalaan, putaran, condong dan terjemahan. transform Sifat sangat serba boleh dan membolehkan reka bentuk kreatif dan dinamik pada halaman web.
element{
transform: rotate() | scale() | skew() | translate();
}
Mari kita ambil contoh memutarkan elemen HTML menggunakan atribut transform. Untuk memutar elemen, kami menggunakan fungsi rotate, yang mengambil nilai sudut (dalam darjah) sebagai hujahnya. Berikut adalah contoh -
<html>
<div class="rotate"> Column </div>
<style>
.rotate {
background-color: orange;
margin: 30px;
width: 70px;
height: 90px;
transform: rotate(45deg);
}
</style>
</html>
Untuk menggunakan berbilang sifat transformasi pada elemen, anda hanya masukkan setiap sifat transformasi yang anda mahu gunakan dalam peraturan CSS yang sama, dipisahkan dengan ruang.
Sebagai contoh, katakan anda mahu menggunakan kesan putaran dan penskalaan pada elemen. Mari kita lihat.
<html>
<head>
<style>
.rotate {
background-color: orange;
margin: 50px;
width: 70px;
height: 60px;
text-align: center;
letter-spacing: 1px;
}
.rotate:hover {
transform: rotate(65deg) scale(1.5);
}
</style>
</head>
<body>
<h1>CSS Transform Properties</h1>
<h3>Given below is a div element which is rotated by 65deg as well as scaled up by 1.5 on hovering.</h3>
<div class="rotate"> Column </div>
</body>
</html>
Dalam contoh di atas, pemilih .rotate mencari elemen yang akan diubah, dan atribut transform mengandungi kedua-dua rotate#🎜🎜 # dan ZumFungsi dipisahkan oleh ruang. Fungsi
putar menggunakan putaran 65 darjah pada elemen, manakala fungsi skala menskalakan elemen kepada 150% daripada saiz asalnya. Transform properties digunakan apabila anda menuding pada elemen.
Gunakan berbilang sifat transformasi pada elementransform dengan memisahkannya dengan koma.
Contohrotate menggunakan putaran 65 darjah pada elemen, manakala fungsi skala menskalakan elemen kepada 150% daripada saiz asalnya. terjemah Fungsi menggerakkan elemen 40 piksel ke kanan dan 35 piksel ke bawah daripada kedudukan asalnya. Transform properties digunakan apabila anda menuding pada elemen.
<html>
<head>
<style>
.rotate {
background-color: yellow;
margin-left: 80px;
width: 70px;
height: 60px;
text-align: center;
letter-spacing: 1px;
}
.rotate:hover {
transform: rotate(65deg) scale(1.5) translate(40px, 35px);
}
</style>
</head>
<body>
<h1>CSS Transform Properties</h1>
<h3>Given below is a div element which is rotated by 65deg as well as scaled up 150 times on hovering. Also, it translates by 40px and 35px.</h3>
<div class="rotate"> Column </div>
</body>
</html>
Contoh
<html>
<head>
<style>
.card {
width: 200px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transition: all 0.6s ease-in-out;
}
.card .front {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background-color: #FFFDD0;
}
.card .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background-color: #FFDEAD;
transform: rotateY(180deg);
}
.card:hover {
transform: rotateY(180deg);
}
.card:active {
transform: rotateY(180deg) scale(0.8);
}
@keyframes flip {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
}
}
@keyframes shrink {
from {
transform: rotateY(180deg) scale(1);
}
to {
transform: rotateY(180deg) scale(0.8);
}
}
.card:active {
animation: flip 0.6s ease-in-out, shrink 0.6s ease-in-out;
}
</style>
</head>
<body>
<div class="card">
<div class="front">
<h2> Front Side </h2>
<p> Hello World!! This is the front side of the card. Hover on me to see the back side. </p>
</div>
<div class="back">
<h2> Back Side </h2>
<p> Hello World!! This is the back side of the card. </p>
</div>
</div>
</body>
</html>
Kad ialah bekas yang mengandungi dua elemen kanak-kanak,
.depan dan .belakang, yang masing-masing mewakili bahagian hadapan dan belakang kad. Elemen .depan dan .belakang diletakkan secara mutlak di dalam bekas .card dan keterlihatan muka belakang# mereka 🎜 🎜#Properties ditetapkan kepada hidden untuk mengelakkannya daripada kelihatan apabila berhadapan dengan pengguna.
Animasi
akan membuatkan kad berputar 180 darjah dalam masa 0.6 saat, mengecut animasi akan menjadikan kad mengecut kepada 80% yang sama tempoh masa saiz asal.
, anda boleh menggunakan pelbagai transformasi, seperti penskalaan, putaran, kecondongan dan terjemahan, pada mana-mana elemen HTML pada halaman web anda. Dengan menggabungkan berbilang sifat transformasi, anda boleh mencipta reka bentuk yang lebih dinamik dan menarik.
Atas ialah kandungan terperinci Bagaimana untuk menggunakan sifat transformasi berbilang pada elemen menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Berapakah Snapdragon 8gen2 yang setara dengan Apple?
Bagaimana untuk menyelesaikan ralat aplikasi WerFault.exe
susun atur mutlak
Mongodb dan mysql mudah digunakan dan disyorkan
penggunaan format_nombor
rgb kepada penukaran heksadesimal
Cara membuat carta dan carta analisis data dalam PPT
Apakah perpustakaan pihak ketiga yang biasa digunakan dalam PHP?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
