Transformation 3D CSS3

Transformations 3D CSS3

Transformations 3D

CSS3 vous permet d'utiliser des transformations 3D pour formater des éléments.

Dans ce chapitre, vous apprendrez certaines de ces méthodes de conversion 3D :

rotateX()
rotateY( )

Méthode RotateX()

Méthode RotateX(), faites-la pivoter à un degré donné L'élément à faire pivoter le long de l'axe 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>

Exécutez le programme pour l'essayer

rotateY() method

rotateY(), fait pivoter un élément autour de son axe Y d'un degré donné.

<!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>

Exécutez le programme et essayez-le

Propriétés de conversion

Le tableau suivant répertorie toutes les propriétés de conversion :

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

Méthode de conversion 3D

Fonction

Description

matrix3d(< em>n,n,n,n,n,n,
函数描述
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)

Définissez la transformation 3D, en utilisant une matrice 4x4 de 16 valeurs.

translate3d(x,y,z)

Définir la transformation 3D.

translateX(x)

Définit une translation 3D en utilisant uniquement les valeurs utilisées pour l'axe X.

translateY(y)

Définissez une translation 3D, en utilisant uniquement les valeurs utilisées pour l'axe Y.

translateZ(z)

Définit une translation 3D, en utilisant uniquement la valeur utilisée pour l'axe Z.

scale3d(x,y,z)

Définissez la transformation de mise à l’échelle 3D.

scaleX(x)

Définissez la transformation de mise à l'échelle 3D en donnant une valeur sur l'axe X.

scaleY(y)

Définissez la transformation de mise à l'échelle 3D en donnant une valeur sur l'axe Y.

scaleZ(z)

Définissez la transformation de mise à l'échelle 3D en donnant une valeur sur l'axe Z.

rotation3d(x,y,z,angle)

Définir la rotation 3D.

rotateX(angle)

Définit une rotation 3D le long de l'axe X.

rotateY(angle)

Définit une rotation 3D le long de l'axe Y.

rotateZ(angle)

Définit une rotation 3D le long de l'axe Z.

perspective(n)

Définir la vue en perspective d'un élément transformé en 3D.

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Transformation 3D CSS3

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]