masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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中文网(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中文网(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>这是一个div元素</div>
<div id="div2">Hello. 这也是一个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中文网(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>你好。这是一个 DIV 元素。</div>
<div id="div2">你好。这是一个 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中文网(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转换的元素3
transform-origin允许您更改转化元素位置3

Kaedah penukaran 2D


函数描述
matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)定义 2D 转换，沿着 X 轴移动元素。
translateY(n)定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)定义 2D 缩放转换，改变元素的宽度。
scaleY(n)定义 2D 缩放转换，改变元素的高度。
rotate(angle)定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。




Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492873 permainan