Maison > Article > interface Web > Quelles propriétés possède la transformation CSS3 ?
Quelles propriétés possède la transformation CSS3 ?
- 青灯夜游original
- 2022-01-13 14:12:381576parcourir
Il existe 6 attributs de transformation CSS3 : 1. transform; 2. transform-origin; 3. transform-style; 4. perspective 5. perspective-origin;
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.
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>
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Quels sont les moyens de contrôler le masquage des éléments en CSS3Article suivant：Quels sont les moyens de contrôler le masquage des éléments en CSS3