Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan sifat transformasi berbilang pada elemen menggunakan CSS?
Bagaimana untuk menggunakan sifat transformasi berbilang pada elemen menggunakan CSS?
- WBOYke hadapan
- 2023-09-02 11:17:021318semak imbas
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 property
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.
tatabahasa
element{
transform: rotate() | scale() | skew() | translate();
}
Contoh
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>
Gunakan dua sifat transformasi kepada satu elemen
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.
Contoh
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 elemenSintaks singkatan membolehkan anda memasukkan berbilang fungsi transformasi dalam satu atribut
transform dengan memisahkannya dengan koma.
ContohIni adalah contoh. Di sini, fungsi
rotate 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>
Gunakan pelbagai transformasiMari buat animasi yang membalikkan kad untuk menunjukkan belakangnya apabila diklik. Anda boleh mencapai ini dengan menggunakan berbilang perubahan dalam CSS bersama-sama dengan beberapa animasi bingkai utama.
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>
Apabila kad hadapan dilegar, kita boleh melihat bahagian belakang kad tersebut. 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.
- Apabila kad dilayangkan, ia akan terbalik untuk mendedahkan belakangnya. Apabila anda mengklik pada kad, ia terbalik dan mengecil kepada 80% daripada saiz asalnya.
Animasi
- Flip
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.
Apabila kad diklik, kedua-dua animasi digunakan serentak, mencipta animasi kompleks yang merangkumi pelbagai transformasi dan peralihan antara hadapan dan belakang. -
Dalam artikel ini, kami mengetahui bahawa menggunakan sifat transformasi berbilang menggunakan CSS ialah cara mudah untuk mencipta animasi kompleks dan kesan elemen HTML. Menggunakan atribut
transform, 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!