Transformasi 2D CSS3

Transformasi CSS3

Melalui transformasi CSS3, kita boleh menggerakkan, menskalakan, memutar, memanjangkan atau meregangkan elemen.

Sokongan penyemak imbas

IE10, FireFox dan Opera menyokong atribut transformasi. Chrome dan Safari memerlukan awalan -webkit-.

Nota: IE9 memerlukan awalan -ms-.

Transformasi 2D

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

terjemah()

putar()

skala()

skew()

matriks()

kaedah translate()

Elemen bergerak dari kedudukan semasa, mengikut parameter anjakan kiri (koordinat x) dan atas (koordinat y) yang diberikan :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    /*translate方法位移*/
        div {
        width:100px;
        height:80px;
        background-color:orange;
        position:absolute;
        left:100px;
        top:100px;
        }
        div.one {
        transform:translate(30px,30px);
        z-index:1;
        }
        div.two {
        background-color:blue;
        }
</style>
</head>
<body>
   <div class="one"></div>
   <div class="two"></div>
</body>
</html>

kaedah rotate()

Jika sudut yang diberikan oleh elemen mengikut arah jam, nilai negatif dibenarkan, dan elemen akan diputar lawan jam.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div {
    width: 150px;
    height: 50px;
    background-color: orange;
    text-align: center;
    position: absolute;
    left: 100px;
    top: 100px;
    }
    div.one {
    transform: rotate(30deg);
    -webkit-transform:rotate(30deg);
    }
    div.two {
    background-color: blue;
    color: white;
    }
</style>
</head>
<body>
   <div class="one"></div>
   <div class="two"></div>
</body>
</html>

kaedah skala()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    left: 100px;
    height: 100px;
    }
    div.one {
    background-color: red;
    transform: scale(0.5,0.5);
    }
</style>
</head>
<body>
   <div>
     <div class="one"></div>
   </div>
</body>
</html>

kaedah condong()

Dengan kaedah skew(), elemen dicondongkan pada sudut tertentu, mengikut parameter garis mendatar (paksi X) dan garis menegak (paksi Y) yang diberikan:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:100px;
    top:100px;
    }
    div.one {
    background-color:red;
    transform:skew(30deg,10deg);
    }
</style>
</head>
<body>
   <div></div>
   <div class="one"></div>
</body>
</html>

kaedah matriks() Kaedah

matriks() menggabungkan semua kaedah transformasi 2D. Kaedah

matriks() mengambil enam parameter dan mengandungi fungsi matematik yang membolehkan anda: memutar, menskala, menggerakkan dan mencondongkan elemen.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:100px;
    top:100px;
    }
    div.one {
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    background-color:red;
    }
</style>
</head>
<body>
   <div></div>
   <div class="one"></div>
</body>
</html>

Sifat penukaran baharu

Semua sifat penukaran disenaraikan di bawah:

Perihalan Harta

transformasi Sesuai untuk elemen transformasi 2D atau 3D 3 🎜>

Fungsi daripada enam nilai

translate(x,y) Mentakrifkan transformasi 2D yang menggerakkan elemen di sepanjang paksi X dan Y.

translateX(n) Mentakrifkan transformasi 2D yang menggerakkan elemen sepanjang paksi-X.

translateY(n) Mentakrifkan transformasi 2D yang menggerakkan elemen di sepanjang paksi Y.

skala(x,y) Takrifkan transformasi penskalaan 2D untuk menukar lebar dan ketinggian elemen. scaleX(n) Mentakrifkan transformasi penskalaan 2D yang mengubah lebar elemen.

skalaY(n) Tentukan transformasi penskalaan 2D untuk menukar ketinggian elemen.

putar(sudut) Mentakrifkan putaran 2D dan menentukan sudut dalam parameter.

skew(x-sudut,y-angle) mentakrifkan transformasi condong 2D, di sepanjang paksi X dan Y.

skewX(sudut) Mentakrifkan transformasi condong 2D, di sepanjang paksi X.

skewY(sudut) Mentakrifkan transformasi condong 2D, di sepanjang paksi Y.

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> div{ width:100px; height:100px; background-color:orange; position:absolute; left:100px; top:100px; } div.one { transform:matrix(0.866,0.5,-0.5,0.866,0,0); background-color:red; } </style> </head> <body> <div></div> <div class="one"></div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

Transformasi 2D CSS3

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]