cari

Rumah  >  Artikel  >  hujung hadapan web  >  Transformasi 2D unsur menggunakan CSS3

Transformasi 2D unsur menggunakan CSS3

WBOY
WBOYke hadapan
2023-09-09 09:21:031386semak imbas

Transformasi 2D digunakan untuk menukar semula struktur elemen, seperti terjemahan, putaran, penskalaan dan kecondongan.

Berikut ialah beberapa fungsi transformasi 2D-

,n,n266
Sr.No. Nilai dan Penerangan
1 digunakan 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

scaleX(n)

digunakan untuk menukar lebar elemen

scaleX(n)

digunakan untuk menukar lebar elemen

使用 CSS3 进行元素的 2D 转换

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!

css3 td
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

Artikel berkaitan

Lihat lagi