Transformation CSS3 2D

Transformation CSS3

Grâce à la transformation CSS3, nous pouvons déplacer, redimensionner, faire pivoter, allonger ou étirer des éléments.

Prise en charge du navigateur

IE10, FireFox et Opera prennent en charge l'attribut transform. Chrome et Safari nécessitent le préfixe -webkit-.

Remarque : IE9 nécessite le préfixe -ms-.

Transformation 2D

Dans ce chapitre, vous découvrirez la transformation 2D méthode :

translate()

rotate()

scale()

skew()

matrix()

méthode translation()

L'élément se déplace à partir de la position actuelle, en fonction des paramètres de déplacement donnés vers la gauche (coordonnée x) et le haut (coordonnée y) :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    /*translate方法位移*/
        div {
        width:100px;
        height:80px;
        background-color:orange;
        position:absolute;
        left:100px;
        top:100px;
        }
        div.one {
        transform:translate(30px,30px);
        z-index:1;
        }
        div.two {
        background-color:blue;
        }
</style>
</head>
<body>
   <div class="one"></div>
   <div class="two"></div>
</body>
</html>

méthode rotate()

Si l'angle donné par l'élément est dans le sens des aiguilles d'une montre, les valeurs négatives sont autorisées, et l'élément sera tourné dans le sens antihoraire.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div {
    width: 150px;
    height: 50px;
    background-color: orange;
    text-align: center;
    position: absolute;
    left: 100px;
    top: 100px;
    }
    div.one {
    transform: rotate(30deg);
    -webkit-transform:rotate(30deg);
    }
    div.two {
    background-color: blue;
    color: white;
    }
</style>
</head>
<body>
   <div class="one"></div>
   <div class="two"></div>
</body>
</html>

méthode scale()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    left: 100px;
    height: 100px;
    }
    div.one {
    background-color: red;
    transform: scale(0.5,0.5);
    }
</style>
</head>
<body>
   <div>
     <div class="one"></div>
   </div>
</body>
</html>

méthode Skew()

Avec la méthode skew(), l'élément est incliné selon un angle donné, en fonction des paramètres de ligne horizontale (axe X) et de ligne verticale (axe Y) donnés :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:100px;
    top:100px;
    }
    div.one {
    background-color:red;
    transform:skew(30deg,10deg);
    }
</style>
</head>
<body>
   <div></div>
   <div class="one"></div>
</body>
</html>

Méthode Matrix() La méthode

matrix() combine toutes les méthodes de transformation 2D. La méthode

matrix() prend six paramètres et contient des fonctions mathématiques qui vous permettent de : faire pivoter, mettre à l'échelle, déplacer et incliner des éléments.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    div{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:100px;
    top:100px;
    }
    div.one {
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    background-color:red;
    }
</style>
</head>
<body>
   <div></div>
   <div class="one"></div>
</body>
</html>

Nouvelles propriétés de conversion

Toutes les propriétés de conversion sont répertoriées ci-dessous :

Description de la propriété

transformation Convient aux éléments de transformation 2D ou 3D 3 🎜>

Fonction Utilisez une matrice de six valeurs.

translate(x,y) Définit une transformation 2D qui déplace les éléments 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 pour modifier la largeur et la hauteur de l'élément. scaleX(n) Définit une transformation de mise à l'échelle 2D qui modifie la largeur de l'élément.

scaleY(n) Définit une transformation de mise à l'échelle 2D pour modifier la hauteur de l'élément.

rotate(angle) Définit la rotation 2D, en spécifiant l'angle dans le paramètre.

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.

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> div{ width:100px; height:100px; background-color:orange; position:absolute; left:100px; top:100px; } div.one { transform:matrix(0.866,0.5,-0.5,0.866,0,0); background-color:red; } </style> </head> <body> <div></div> <div class="one"></div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Transformation CSS3 2D

É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]