Quelles propriétés possède la transformation CSS3 ?-Questions et réponses frontales-php.cn

Quelles propriétés possède la transformation CSS3 ?

青灯夜游

Libérer： 2022-01-13 14:12:38

original

1614 Les gens l'ont consulté

Il existe 6 attributs de transformation CSS3 : 1. transform; 2. transform-origin; 3. transform-style; 4. perspective 5. perspective-origin;

Quelles propriétés possède la transformation CSS3 ?

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Les transformations CSS3 peuvent déplacer, mettre à l'échelle, faire pivoter, allonger ou étirer des éléments.

Quelles propriétés possède la transformation CSS3 ?

css3 transform property (transformation 2D/3D)

Property	Description	CSS
transform	Convient aux éléments 2D ou transformé en 3D	3
transform-origin	vous permet de changer la position de l'élément de transformation	3
transform-style	Spécifiez comment les éléments sont imbriqués dans l'espace 3D	3
perspective	Spécifiez comment les éléments 3D sont affichés dans perspective	3
perspective-origin	Spécifiez la position inférieure des éléments 3D	3
backface-visibility	Définit si un élément doit être visible lorsqu'il n'est pas face à l'écran	3

Exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <style type="text/css">
			#rotate2D, #rotate3D {
			    width: 80px;
			    height: 70px;
			    color: white;
			    font-weight: bold;
			    font-size: 15px;
			    padding: 10px;
			    float: left;
			    margin-right: 50px;
			    border-radius: 5px;
			    border: 1px solid #000000;
			    background: red;
			    margin: 10px;
				transition:transform 2s;
				-webkit-transition:transform 2s; /* Safari */
			}
			#rotate2D:hover{
				transform: rotate(180deg);
			}
			#rotate3D:hover{
				transform: rotateY(180deg);
			}
        </style>
    </head>
    <body>
       <div id="rotate2D">2D 转换</div>
	   <div id="rotate3D">3D 转换</div>
    </body>
</html>

Copier après la connexion

Quelles propriétés possède la transformation CSS3 ?

Connaissances approfondies :

Méthode de conversion 2D

fonction	description
matrice(n ,n, n,n , n,n)	définit une transformation 2D, en utilisant une matrice de six valeurs.
translate(x,y)	définit une transformation 2D qui déplace l'élément le long des axes X et Y.
translateX(n)	définit une transformation 2D qui déplace les éléments le long de l'axe X.
translateY(n)	définit une transformation 2D qui déplace les éléments le long de l'axe Y.
scale(x,y)	définit une transformation de mise à l'échelle 2D qui modifie la largeur et la hauteur d'un élément.
scaleX(n)	définit une transformation de mise à l'échelle 2D qui modifie la largeur d'un élément.
scaleY(n)	définit une transformation de mise à l'échelle 2D qui modifie la hauteur de l'élément.
rotate(angle)	définit la rotation 2D, en spécifiant l'angle dans les paramètres.
skew(x-angle,y-angle)	définit une transformation d'inclinaison 2D, le long des axes X et Y.
skewX(angle)	définit une transformation d'inclinaison 2D, le long de l'axe X.
skewY(angle)	définit une transformation d'inclinaison 2D, le long de l'axe Y.

Méthode de conversion 3D

fonction	description
matrix3d(n,n,n,n,n ,n, n ,n,n,n,n,n,n,n,n,n)	définir la transformation 3D, en utilisant 4x4 avec une matrice de 16 valeurs .
translate3d(x,y,z)	définir la transformation 3D.
translateX(x)	Définit une translation 3D, en utilisant uniquement la valeur utilisée pour l'axe X.
translateY(y)	définit une translation 3D, en utilisant uniquement la valeur utilisée 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éfinit la transformation de mise à l'échelle 3D.
scaleX(x)	définit une transformation de mise à l'échelle 3D, étant donné une valeur de l'axe X.
scaleY(y)	définit une transformation de mise à l'échelle 3D, étant donné une valeur de l'axe Y.
scaleZ(z)	définit une transformation de mise à l'échelle 3D, étant donné une valeur de l'axe Z.
rotate3d(x,y,z,angle)	définit 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éfinit la vue en perspective d'un élément transformé en 3D.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!