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.
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;
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: 'Open Sans', 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>
Rendu :
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!