communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > Comment utiliser l'attribut de transformation

Comment utiliser l'attribut de transformation

青灯夜游
Libérer： 2019-02-12 10:19:34
original
11955 Les gens l'ont consulté

L'attribut transform est utilisé pour appliquer une transformation 2D ou 3D à un élément ; cet attribut nous permet de faire pivoter, mettre à l'échelle, déplacer ou incliner l'élément.

Comment utiliser l'attribut de transformation

Attribut de transformation CSS3

Fonction : L'attribut de transformation applique la 2D à l'élément ou la conversion 3D. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

Syntaxe : 

transform: none|transform-functions;
Copier après la connexion

peut avoir une description de la valeur d'attribut :

aucun : La définition n'est pas convertie.

matrix(n,n,n,n,n,n) : Définissez la transformation 2D, en utilisant une matrice de six valeurs.

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 .

translate(x,y) : Définir la transformation 2D.

translate3d(x,y,z) : Définir la transformation 3D.

translateX(x) : Définissez la transformation, en utilisant simplement la valeur de l'axe X.

translateY(y) : Définissez la transformation, en utilisant simplement la valeur de l'axe Y.

translateZ(z) : Définissez la transformation 3D, en utilisant simplement la valeur de l'axe Z. ​

scale(x,y) : définit la transformation de mise à l'échelle 2D.           

scale3d(x,y,z) : définir la transformation de mise à l'échelle 3D.

scaleX(x) : Définissez la transformation de mise à l'échelle en définissant la valeur de l'axe X.

scaleY(y) : Définissez la transformation de mise à l'échelle en définissant la valeur de l'axe Y. ​

scaleZ(z) : Définissez la transformation de mise à l'échelle 3D en définissant la valeur de l'axe Z.

rotate(angle) : Définissez la rotation 2D, précisez l'angle dans le paramètre.

rotate3d(x,y,z,angle) : Définit la rotation 3D.

rotateX(angle) : Définit la rotation 3D le long de l'axe X.

rotateY(angle) : Définit la rotation 3D le long de l'axe Y.

rotateZ(angle) : Définit la rotation 3D le long de l'axe Z.

skew(x-angle,y-angle) : définit la transformation d'inclinaison 2D le long des axes X et Y.

skewX(angle) : définit la transformation d'inclinaison 2D le long de l'axe X.

skewY(angle) : Définit la transformation d'inclinaison 2D le long de l'axe Y.

perspective(n) : Définit la vue en perspective de l'élément de transformation 3D.

Remarque : Internet Explorer 10, Firefox et Opera prennent en charge l'attribut transform. Internet Explorer 9 prend en charge une propriété alternative -ms-transform (pour les transformations 2D uniquement). Safari et Chrome prennent en charge les propriétés alternatives -webkit-transform (transformations 3D et 2D). Opera ne prend en charge que la conversion 2D.

Exemple d'utilisation de l'attribut de transformation CSS3

<!DOCTYPE html>
<html>
<head>
<style> 
*, *:after, *:before {
  box-sizing: border-box;
}
body {
  background: #F5F3F4;
  margin: 0;
  padding: 10px;
  font-family: &#39;Open Sans&#39;, sans-serif;
  text-align: center;
}
h2, h4 {
  font-weight: 400;
  color: #4d4d4d;
}
.card {
  display: inline-block;
  margin: 10px;
  background: #fff;
  padding: 10px;
  min-width: 180px;
  box-shadow: 0 3px 5px #ddd;
  color: #555;
}
.card .box {
  width: 60px;
  height: 60px;
  margin: auto;
  background: #ddd;
  cursor: pointer;
  box-shadow: 0 0 5px #ccc inset;
}
.card .box .fill {
  width: 60px;
  height: 60px;
  position: relative;
  background: #03A9F4;
  opacity: .5;
  box-shadow: 0 0 5px #ccc;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.card p {
  margin: 25px 0 0;
}
.rotate:hover .fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.rotateX:hover .fill {
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
}
.rotateY:hover .fill {
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}
.rotateZ:hover .fill {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.scale:hover .fill {
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2);
}
.scaleX:hover .fill {
  -webkit-transform: scaleX(2);
  transform: scaleX(2);
}
.scaleY:hover .fill {
  -webkit-transform: scaleY(2);
  transform: scaleY(2);
}
.skew:hover .fill {
  -webkit-transform: skew(45deg, 45deg);
  transform: skew(45deg, 45deg);
}
.skewX:hover .fill {
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}
.skewY:hover .fill {
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
}
.translate:hover .fill {
  -webkit-transform: translate(45px, 1em);
  transform: translate(45px, 1em);
}
.translateX:hover .fill {
  -webkit-transform: translateX(45px);
  transform: translateX(45px);
}
.translateY:hover .fill {
  -webkit-transform: translateY(45px);
  transform: translateY(45px);
}
.matrix:hover .fill {
  -webkit-transform: matrix(2, 2, 0, 2, 45, 0);
  transform: matrix(2, 2, 0, 2, 45, 0);
}
</style>
</head>
<body>
<!-- Rotate-->
<div class="card">
  <div class="box rotate">
    <div class="fill"></div>
  </div>
  <p>rotate(45deg)  </p>
</div>
<div class="card">
  <div class="box rotateX">
    <div class="fill"></div>
  </div>
  <p>rotateX(45deg)</p>
</div>
<div class="card">
  <div class="box rotateY">
    <div class="fill"></div>
  </div>
  <p>rotateY(45deg)</p>
</div>
<div class="card">
  <div class="box rotateZ">
    <div class="fill"></div>
  </div>
  <p>rotateZ(45deg)  </p>
</div>
<!-- scale-->
<div class="card">
  <div class="box scale">
    <div class="fill"></div>
  </div>
  <p>scale(2)</p>
</div>
<div class="card">
  <div class="box scaleX">
    <div class="fill"></div>
  </div>
  <p>scaleX(2)    </p>
</div>
<div class="card">
  <div class="box scaleY">
    <div class="fill"></div>
  </div>
  <p>scaleY(2)    </p>
</div>
<!-- skew-->
<div class="card">
  <div class="box skew">
    <div class="fill"></div>
  </div>
  <p>skew(45deg, 45deg)  </p>
</div>
<div class="card">
  <div class="box skewX">
    <div class="fill"></div>
  </div>
  <p>skewX(45deg)</p>
</div>
<div class="card">
  <div class="box skewY">
    <div class="fill"></div>
  </div>
  <p>skewY(45deg)</p>
</div>
<!-- translate-->
<div class="card">
  <div class="box translate">
    <div class="fill"></div>
  </div>
  <p>translate(45px)  </p>
</div>
<div class="card">
  <div class="box translateX">
    <div class="fill"></div>
  </div>
  <p>translateX(45px)</p>
</div>
<div class="card">
  <div class="box translateY">
    <div class="fill"></div>
  </div>
  <p>translateY(45px)</p>
</div>
<div class="card">
  <div class="box matrix">
    <div class="fill"></div>
  </div>
  <p> matrix(2, 2, 0, 2, 45, 0)</p>
</div>
</body>
</html>
Copier après la connexion

Rendu :

Comment utiliser lattribut de transformation

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!

Étiquettes associées：
css3 attribut de transformation
source：php.cn
Article précédent：Comment utiliser l'attribut perspective-origin Article suivant：Comment utiliser l'attribut de style de transformation
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Déplacez le contenu vers la gauche en ajoutant la propriété Largeur J'ai prévu des marges au corps. main {gauche marge : 200px ; marge droite : 200px ; aligne...
Depuis 2024-04-06 22:01:35
0
3
816
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Calculer la somme des champs dans une autre table à l'aide d'une requête MySQL SQL J'ai un schéma comme celui-ci : Table utilisateur avec les attributs "user_id" e...
Depuis 2024-04-06 19:39:29
0
1
441
Styles CSS non appliqués au site Je crée un site Web en utilisant Bootstrap5 mais les propriétés index.css ne sont pas appl...
Depuis 2024-04-06 17:12:23
0
1
336
Comment modifier les propriétés du tableau imbriqué JSON "project_id" et "project_name" Nom :[{"project_id":1,"project_name":"CDP","role":...
Depuis 2024-04-06 15:39:51
0
1
466
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal