masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Transformasi 3D CSS3

Sebelum mengkaji bahagian ini, mari kita lihat paksi koordinat 3D

1010.jpg

Gunakan X, Y dan Z untuk mewakili tiga dimensi ruang masing-masing, dan tiga paksi berserenjang antara satu sama lain.

Transformasi 3D

CSS3 membolehkan anda memformat elemen menggunakan transformasi 3D.

Dalam bab ini, anda akan mempelajari beberapa kaedah penukaran 3D ini:

rotateX()

rotateY()

Sokongan Penyemak Imbas

1019.png

kaedah rotateX()

kaedah rotateX(), memutarkan elemen di sekeliling paksi-Xnya mengikut darjah tertentu. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    #test{
        height:200px;
        width:200px;
        position:absolute;
        margin-top:100px;
        margin-left:100px;
    }
    #test div{
        height:200px;
        width:200px;
        background:lightblue;
        -webkit-transition: all .6s;
    }
    #test div:hover{
        -webkit-transform:rotateX(90deg);
    }
</style>
<body>
    <div id="test">
        <div></div>
    </div>
</body>
</html>

kaedah rotateY()

kaedah rotateY(), memutarkan elemen di sekeliling paksi-Ynya pada darjah tertentu. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    #test{
        width:400px;
        height:400px;
        position:absolute;
        margin-left:100px;
        margin-top: 100px;
        /* 光源设置为离页面200像素的位置 */
        perspective:200px;
    }
    #test1{
        width:400px;
        height:400px;
        position:relative;
        /* 相当于指定一个3D的空间 */
        transform-style:preserve-3d;
    }
    #div2{
        width:400px;
        height:400px;
        position:relative;
        background:lightcoral;
        /* 指定变换效果，变换时间为1S */
        -webkit-transition: all 1s;
    }
    #test #test1:hover #div2{
        /* 绕Y轴旋转180度 */
        -webkit-transform: rotateY(180deg);
    }
</style>
<body>
    <div id="test">
        <div id="test1">
            <div id="div2"></div>
        </div>
        
    </div>
</body>
</html>


Sifat Transformasi

Jadual berikut menyenaraikan semua sifat transformasi:


Sifat                                                                                                                 >

transform Menggunakan transformasi 2D atau 3D pada elemen. 3  


transform-origin membolehkan anda menukar kedudukan elemen yang diubah. 3  

gaya transformasi Menentukan cara elemen bersarang dipaparkan dalam ruang 3D. 3  

perspektif Menentukan kesan perspektif elemen 3D. 3  

perspektif-asal Menentukan kedudukan bawah elemen 3D. 3  

keterlihatan belakang Mentakrifkan sama ada elemen kelihatan apabila tidak menghadap skrin. 3

Kaedah penukaran 3D

Fungsi

Penerangan

matriks3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n) mentakrifkan penjelmaan 3D, menggunakan matriks 4x4 16 nilai .


translate3d(x,y,z) mentakrifkan transformasi 3D.

translateX(x) Mentakrifkan terjemahan 3D, menggunakan hanya nilai yang digunakan untuk paksi X.

translateY(y) Mentakrifkan terjemahan 3D, menggunakan hanya nilai yang digunakan untuk paksi Y.

translateZ(z) Mentakrifkan terjemahan 3D, menggunakan hanya nilai yang digunakan untuk paksi Z.

scale3d(x,y,z) mentakrifkan transformasi penskalaan 3D.

scaleX(x) Mentakrifkan transformasi penskalaan 3D dengan memberikan nilai paksi X.

skalaY(y) Mentakrifkan transformasi penskalaan 3D dengan memberikan nilai paksi Y.

scaleZ(z) Mentakrifkan transformasi penskalaan 3D dengan memberikan nilai paksi Z.

rotate3d(x,y,z,angle) mentakrifkan putaran 3D.

rotateX(angle) Mentakrifkan putaran 3D di sepanjang paksi-X.

putarY(sudut) Mentakrifkan putaran 3D di sepanjang paksi Y.

putarZ(sudut) Mentakrifkan putaran 3D di sepanjang paksi Z.

perspective(n) Mentakrifkan pandangan perspektif elemen ubah 3D.

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> #test{ height:200px; width:200px; position:absolute; margin-top:100px; margin-left:100px; } #test #div2{ height:200px; width:200px; background:lightcoral; -webkit-transition: all .6s; position:relative; -webkit-transform:rotateX(-80deg) translateZ(200px); } #test:hover #div2{ -webkit-transform: rotateX(80deg); } </style> <body> <div id="test"> <div id="div2"></div> </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)  492836 permainan