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.
