Transformasi 3D CSS3

Transformasi 3D CSS3

Transformasi 3D

CSS3 membolehkan anda menggunakan transformasi 3D untuk memformat elemen.

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

rotateX()
rotateY( )

kaedah rotateX()

kaedah rotateX(), putarkannya pada darjah tertentu Elemen untuk diputar sepanjang paksi X.

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:75px;
            background-color: #f4ff99;
            border:1px solid black;
        }
        div#div2
        {
            transform:rotateX(120deg);
            -webkit-transform:rotateX(120deg); /* Safari and Chrome */
        }
    </style>
</head>
<body>
<div>PHP.CN</div>
<div id="div2">HELLO</div>
</body>
</html>

Jalankan program untuk mencubanya

rotateY() kaedah

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

<!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:rotateY(130deg);
            -webkit-transform:rotateY(130deg); /* Safari and Chrome */
        }
    </style>
</head>
<body>
<div>Hello</div>
<div id="div2">Hello.</div>
</body>
</html>

Jalankan atur cara dan cuba

Sifat penukaran

Jadual berikut menyenaraikan semua sifat penukaran :

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	允许你改变被转换元素的位置。	3
transform-style	规定被嵌套元素如何在 3D 空间中显示。	3
perspective	规定 3D 元素的透视效果。	3
perspective-origin	规定 3D 元素的底部位置。	3
backface-visibility	定义元素在不面对屏幕时是否可见。	3

Kaedah penukaran 3D

Fungsi

Penerangan

matriks3d(< em>n,n,n,n,n,n em>,

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

n,n,n,n,n ,n,n,n,n,n)

Tentukan penjelmaan 3D, menggunakan matriks 4x4 16 nilai.

translate3d(x,y,z)

Tentukan transformasi 3D.

translateX(x)

Mentakrifkan terjemahan 3D menggunakan hanya nilai yang digunakan untuk paksi X.

translateY(y)

Tentukan terjemahan 3D, menggunakan hanya nilai yang digunakan untuk paksi Y.

translateZ(z)

Mentakrifkan terjemahan 3D, menggunakan hanya nilai yang digunakan untuk paksi Z.

skala3d(x,y,z)

Tentukan transformasi penskalaan 3D.

scaleX(x)

Takrifkan transformasi penskalaan 3D dengan memberikan nilai paksi X.

scaleY(y)

Takrifkan transformasi penskalaan 3D dengan memberikan nilai paksi Y.

scaleZ(z)

Takrifkan transformasi penskalaan 3D dengan memberikan nilai paksi-Z.

putar3d(x,y,z,sudut)

Tentukan putaran 3D.

rotateX(angle)

Mentakrifkan putaran 3D di sepanjang paksi X.

rotateY(angle)

Mentakrifkan putaran 3D di sepanjang paksi Y.

rotateZ(angle)

Mentakrifkan putaran 3D di sepanjang paksi Z.

perspektif(n)

Tentukan pandangan perspektif bagi elemen yang diubah suai 3D.

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { width:100px; height:75px; background-color: #f4ff99; border:1px solid black; } div#div2 { transform:rotateX(120deg); -webkit-transform:rotateX(120deg); /* Safari and Chrome */ } </style> </head> <body> <div>PHP.CN</div> <div id="div2">HELLO</div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

Transformasi 3D 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]