Transformasi 3D...LOGIN

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

FungsiPenerangan
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.



bahagian seterusnya
<!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>
babperisian kursus