Dalam CSS3, parameter pertama dalam kaedah skala() mengisi gandaan penskalaan elemen sepanjang arah mendatar, dan parameter kedua mengisi gandaan penskalaan elemen sepanjang sintaks menegak ialah: "transform:scale(x,y)".
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
kaedah skala()
Skala merujuk kepada "zum masuk" dan "zum masuk". Dalam CSS3, kita boleh menggunakan kaedah skala() untuk menskalakan elemen berdasarkan asal pusat.
Sama seperti kaedah translate(), kaedah skala() juga mempunyai tiga situasi:
(1) skalaX(x): elemen hanya berskala mendatar (penskalaan paksi X) ;
(2) skalaY(y): Elemen diskalakan dalam arah menegak sahaja (Skala paksi-Y)
(3) skala(x,y): Unsur ialah berskala dalam kedua-dua arah mendatar dan menegak (skala paksi-X serentak dengan paksi Y); ia lebih besar daripada 1, ia bermakna membesarkannya; jika ia kurang daripada 1, ia bermakna mengurangkannya.
Ia akan mudah difahami jika anda memikirkan konsep gandaan.
2. skalaY(y)transform:scaleX(x)
Penjelasan:
y bermaksud unsur itu bersama arah menegak (paksi-Y) Faktor zum Jika lebih besar daripada 1, ia bermakna zum masuk jika kurang daripada 1, ia bermakna zum keluar.
3. skala(x,y)
Sintaks:
transform:scaleY(y)
Penjelasan:
x mewakili unsur bersama Gandaan penskalaan dalam arah mendatar (paksi-X), dan y mewakili gandaan penskalaan unsur sepanjang arah menegak (paksi-Y).
Perhatikan bahawa Y ialah parameter pilihan Jika nilai Y tidak ditetapkan, ini bermakna faktor penskalaan dalam arah X dan Y adalah sama (membesarkan faktor yang sama pada masa yang sama). Contoh:
Kesan pratonton dalam pelayar chrome adalah seperti berikut:transform:scale(x,y)
<!DOCTYPE html> <html> <head> <title>CSS3缩放scale()用法</title> <style type="text/css"> /*设置原始元素样式*/ .main { margin:100px auto;/*水平居中*/ width:300px; height:200px; border:1px dashed gray; } /*设置当前元素样式*/ #jb51 { width:300px; height:200px; color:white; background-color: #3EDFF4; text-align:center; transform:scaleX(1.5); -webkit-transform:scaleX(1.5); /*兼容-webkit-引擎浏览器*/ -moz-transform:scaleX(1.5); /*兼容-moz-引擎浏览器*/ } /*普通方便对比*/ #jbzj { width:300px; height:200px; color:white; background-color: #3EDFF4; text-align:center; } </style> </head> <body> <div class="main"> <div id="jb51">1</div> </div> <div class="main"> <div id="jbzj">2</div> </div> </body> </html>
video css tutorial
)Atas ialah kandungan terperinci Apa yang perlu diisi dalam skala dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!