Rumah > Artikel > hujung hadapan web > Transformasi 2D unsur menggunakan CSS3
Transformasi 2D unsur menggunakan CSS3
- WBOYke hadapan
- 2023-09-09 09:21:031219semak imbas
Transformasi 2D digunakan untuk menukar semula struktur elemen, seperti terjemahan, putaran, penskalaan dan kecondongan.
Berikut ialah beberapa fungsi transformasi 2D-
| Sr.No. | Nilai dan Penerangan |
|---|---|
| 1 | ,n,ndigunakan Tentukan penjelmaan matriks dengan enam nilai |
| terjemah(x,y) | digunakan untuk mengubah elemen di sepanjang paksi-x dan paksi-y |
| translateX(n) Digunakan untuk mengubah elemen sepanjang paksi-x |
|
| 4 | translateY(n) Digunakan untuk mengubah elemen sepanjang paksi-y |
| e (x,y) digunakan untuk menukar elemen Lebar dan tinggi | |
| 6 | scaleX(n) digunakan untuk menukar lebar elemen |
scaleX(n)
digunakan untuk menukar lebar elemen
kod kepada 2D mengubah elemen menggunakan CSS3 -
Contoh
🎜 Demo Masa Nyata 🎜<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 100px;
height: 100px;
background-color: rgb(255, 17, 0);
border:2px solid black;
margin: 20px;
display: inline-block;
color: white;
}
.rotate {
transform: rotate(20deg);
}
.translate {
transform: translate(30px, 20px);
}
.scale {
transform: scale(2, 1);
margin-left:70px;
}
.skew {
transform: skew(20deg);
}
</style>
</head>
<body>
<h1>2D transformation of elements </h1>
<div class="rotate">ROTATE</div>
<div class="skew">SKEW</div>
<div class="scale">SCALE</div>
<div class="translate">TRANSLATE</div>
</body>
</html>🎜Output🎜🎜🎜🎜 🎜🎜🎜🎜Atas ialah kandungan terperinci Transformasi 2D unsur menggunakan CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Gambaran keseluruhan ciri baharu CSS3: Cara menggunakan kesan animasi CSS3Artikel seterusnya：Gambaran keseluruhan ciri baharu CSS3: Cara menggunakan kesan animasi CSS3