Transformasi 2D CSS3

Transformasi 2D CSS3

Transformasi CSS3

Transformasi CSS3, kita boleh menggerakkan, menskalakan, membalikkan, memutar dan elemen regangan.

Bagaimana ia berfungsi?

Kesan transformasi membolehkan elemen menukar bentuk, saiz dan kedudukannya.

Anda boleh menukar elemen anda menggunakan 2D atau 3D.

Transformasi 2D

Dalam bab ini anda akan belajar tentang kaedah transformasi 2D:

terjemah()
putar()
skala()
skew()
matriks()

Instance

rreee

Jalankan atur cara Cuba kaedah

translate()

translate() kaedah, berdasarkan parameter yang diberikan oleh kiri (paksi-X) dan atas (Y- paksi) kedudukan, daripada elemen semasa Kedudukan bergerak.

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <style>
        div
        {
            width:200px;
            height:100px;
            background-color: #aeffb1;
            /* Rotate div */
            transform:rotate(30deg);
            -ms-transform:rotate(30deg); /* IE 9 */
            -webkit-transform:rotate(30deg); /* Safari and Chrome */
        }
    </style>
</head>
<body>
<div>Hello</div>
</body>
</html>

Jalankan program dan cuba

Petua: terjemah value ( 50px, 100px) sedang mengalihkan elemen 50 piksel dari kiri dan 100 piksel dari atas.

kaedah rotate()

kaedah rotate(), memutarkan elemen mengikut arah jam mengikut darjah tertentu. Nilai negatif dibenarkan, yang memutarkan elemen mengikut lawan jam.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:75px;
            background-color: #9dfff2;
            border:1px solid #e81d26;
        }
        div#div2
        {
            transform:translate(50px,100px);
            -ms-transform:translate(50px,100px); /* IE 9 */
            -webkit-transform:translate(50px,100px); /* Safari and Chrome */
        }
    </style>
</head>
<body>
<div>這是一個(gè)div元素</div>
<div id="div2">Hello. 這也是一個(gè)div元素</div>
</body>
</html>

Petunjuk: nilai putaran (30deg) elemen berputar 30 darjah mengikut arah jam.

Jalankan atur cara dan cuba

kaedah skala()

kaedah skala(), elemen bertambah atau Saiz yang dikecilkan bergantung pada parameter lebar (paksi-X) dan ketinggian (paksi-Y):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:75px;
            background-color:red;
            border:1px solid black;
        }
        div#div2
        {
            transform:rotate(30deg);
            -ms-transform:rotate(30deg); /* IE 9 */
            -webkit-transform:rotate(30deg); /* Safari and Chrome */
        }
    </style>
</head>
<body>
<div>你好。這是一個(gè) DIV 元素。</div>
<div id="div2">你好。這是一個(gè) DIV 元素。</div>
</body>
</html>

Petunjuk: skala(2,4) menukar lebar kepada 2 kali ganda saiz asal , dan ketinggian 4 kali ganda saiz asal.

Jalankan program dan cuba

kaedah condong()

kaedah condong(), elemen akan dilaraskan mengikut parameter garisan Mendatar (paksi-X) dan menegak (paksi-Y) sudut yang diberikan:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
    div
    {
        width:100px;
        height:75px;
        background-color:red;
        border:1px solid black;
    }
    div#div2
    {
        margin:100px;
        transform:scale(2,4);
        -ms-transform:scale(2,4); /* IE 9 */
        -webkit-transform:scale(2,4); /* Safari and Chrome */
    }
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

Petua : skew(30deg,20deg) ialah elemen yang 20 darjah dan 30 darjah mengelilingi paksi-X dan paksi-Y.

Jalankan program dan cuba

kaedah matriks()

Kaedah Matriks() dan 2D kaedah transformasi digabungkan menjadi satu.

Kaedah matriks mempunyai enam parameter, termasuk fungsi putaran, penskalaan, pergerakan (terjemahan) dan kecondongan.

Contoh

Gunakan kaedah matriks() untuk memutarkan elemen div 30°

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

Jalankan atur cara dan cuba ia

Sifat transformasi baharu

Semua sifat transformasi disenaraikan di bawah:

Property	描述	CSS
transform	適用于2D或3D轉(zhuǎn)換的元素	3
transform-origin	允許您更改轉(zhuǎn)化元素位置	3

Kaedah penukaran 2D

函數(shù)	描述
matrix(n,n,n,n,n,n)	定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。
translate(x,y)	定義 2D 轉(zhuǎn)換，沿著 X 和 Y 軸移動(dòng)元素。
translateX(n)	定義 2D 轉(zhuǎn)換，沿著 X 軸移動(dòng)元素。
translateY(n)	定義 2D 轉(zhuǎn)換，沿著 Y 軸移動(dòng)元素。
scale(x,y)	定義 2D 縮放轉(zhuǎn)換，改變?cè)氐膶挾群透叨取?/td>
scaleX(n)	定義 2D 縮放轉(zhuǎn)換，改變?cè)氐膶挾取?/td>
scaleY(n)	定義 2D 縮放轉(zhuǎn)換，改變?cè)氐母叨取?/td>
rotate(angle)	定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。
skew(x-angle,y-angle)	定義 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸。
skewX(angle)	定義 2D 傾斜轉(zhuǎn)換，沿著 X 軸。
skewY(angle)	定義 2D 傾斜轉(zhuǎn)換，沿著 Y 軸。

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> div { width:200px; height:100px; background-color: #aeffb1; /* Rotate div */ transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } </style> </head> <body> <div>Hello</div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik