Apa yang perlu diisi dalam skala dalam css3-Soal Jawab bahagian hadapan-php.cn

Apa yang perlu diisi dalam skala dalam css3

WBOY

Lepaskan： 2022-03-16 11:12:29

asal

2199 orang telah melayarinya

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)".

Apa yang perlu diisi dalam skala dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Apa yang perlu diisi dalam skala dalam css3

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)

Salin selepas log masuk

Sintaks:

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)

Salin selepas log masuk

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)

Salin selepas log masuk

Analisis:

Dari atas Seperti yang dapat dilihat daripada rajah, unsur itu dibesarkan 1.5 kali ganda sepanjang paksi-X (dilanjutkan dalam kedua-dua arah pada masa yang sama, pembesaran keseluruhan ialah 1.5 kali).

<!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>

Salin selepas log masuk

Apabila menggunakan kod di atas, kesan pratonton dalam penyemak imbas adalah seperti berikut:

Apa yang perlu diisi dalam skala dalam css3

(Belajar perkongsian video:

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!