Transformation CSS3 2D
Transformation CSS3 2D
Transformation CSS3
Transformation CSS3, nous pouvons déplacer, mettre à l'échelle, inverser, faire pivoter et étirer un élément.
Comment ça marche ?
L'effet de transformation permet à un élément de changer de forme, de taille et de position.
Vous pouvez convertir vos éléments en 2D ou en 3D.
Transformation 2D
Dans ce chapitre, vous découvrirez les méthodes de transformation 2D :
traduire()
rotate()
scale()
skew()
matrice()
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:200px;
height:100px;
background-color: #aeffb1;
/* Rotate div */
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>Exécutez le programme Essayez la méthode
translate()
translate(), basée sur les paramètres donnés par la gauche (axe X) et le haut (axe Y- (axe) positions, à partir de l'élément actuel Position se déplace.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color: #9dfff2;
border:1px solid #e81d26;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>这是一个div元素</div>
<div id="div2">Hello. 这也是一个div元素</div>
</body>
</html>Exécutez le programme et essayez-le
Conseils : traduire la valeur ( 50px, 100px) déplace l'élément de 50 pixels vers la gauche et de 100 pixels vers le haut.
Méthode Rotate()
Méthode Rotate(), fait pivoter un élément dans le sens des aiguilles d'une montre d'un degré donné. Les valeurs négatives sont autorisées, ce qui fait tourner l'élément dans le sens inverse des aiguilles d'une montre.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>你好。这是一个 DIV 元素。</div>
<div id="div2">你好。这是一个 DIV 元素。</div>
</body>
</html>Astuce : l'élément de valeur de rotation (30 deg) pivote de 30 degrés dans le sens des aiguilles d'une montre.
Exécutez le programme et essayez-le
Méthode scale()
Méthode scale(), l'élément augmente ou La taille réduite dépend des paramètres de largeur (axe X) et de hauteur (axe Y) :
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-webkit-transform:scale(2,4); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>Indice : scale(2,4) transforme la largeur en 2 fois la taille originale et une hauteur 4 fois sa taille originale.
Exécutez le programme et essayez-le
Méthode Skew()
Méthode Skew(), l'élément sera ajusté en fonction des paramètres de ligne horizontale (axe X) et verticale (axe Y) étant donné les angles :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>Astuce : skew(30deg,20deg) est un élément qui est de 20 degrés et 30 degrés autour de l'axe X et de l'axe Y.
Exécutez le programme et essayez-le
Méthode Matrix()
Méthode Matrix() et 2D Les méthodes de transformation sont fusionnées en une seule.
La méthode matricielle comporte six paramètres, dont les fonctions de rotation, de mise à l'échelle, de mouvement (translation) et d'inclinaison.
Exemple
Utilisez la méthode Matrix() pour faire pivoter l'élément div de 30°
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>Exécutez le programme et essayez ça
Nouvelles propriétés de transformation
Toutes les propriétés de transformation sont répertoriées ci-dessous :
| Property | 描述 | CSS |
|---|---|---|
| transform | 适用于2D或3D转换的元素 | 3 |
| transform-origin | 允许您更改转化元素位置 | 3 |
Méthode de conversion 2D
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
