Vingt-sept, CSS3 avancé
1.Conversion CSS3 2D
La transformation est l'une des fonctionnalités perturbatrices de CSS3, qui peut produire des effets tels que le déplacement, la rotation et la mise à l'échelle des éléments.
La transformation peut être simplement comprise comme une déformation
Déplacer : traduire ; faire pivoter : faire pivoter ; mettre à l'échelle : mettre à l'échelle
1.1 Système de coordonnées bidimensionnel
La transformation 2D est une technique qui modifie la position et la forme des étiquettes sur un plan bidimensionnel
1.2 Traduction mobile de conversion 2D
Le mouvement 2D est une fonction de conversion 2D, qui peut changer la position des éléments sur la page, similaire au positionnement
grammaire:
transform : translate(x,y); ou écrivez-les séparémenttransformer : traduireX(n);transformer : traduireY(n);
Points clés:
Définit le mouvement dans la transformation 2D, en déplaçant les éléments le long des axes X et Y
Le plus grand avantage de la traduction est qu’elle n’affecte pas la position des autres éléments.
<style>
/* 移动盒子的位置：定位、盒子的外边距、2d转换移动 */
div {
width: 200px;
height: 200px;
background-color: saddlebrown;
/* 1、 transform: translate(x,y); x就是x轴上移动位置，y就是y轴上移动位置，中间用逗号分割 */
/* transform: translate(100px, 100px); */
/* 2、只移动x坐标 */
/* transform: translate(100px, 0); */
/* transform: translateX(100px); */
/* 3、只移动y坐标 */
/* transform: translate(0，100px); */
/* transform: translateY(100px); */
}
/* div:first-child {
transform: translate(100px, 100px);
} */
div:last-child {
background-color: salmon;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>L'unité de pourcentage dans Translate est relative à son propre élément Translate:(50%,50%);
N'a aucun effet sur les balises en ligne
<style>
.three {
position: relative;
width: 500px;
height: 500px;
background-color: sandybrown;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: aqua;
/* margin-top: -100px;
margin-left: -100px; */
/* translate(-50%, -50%) 盒子往上走自己高度的一半 */
transform: translate(-50%, -50%);
}
span {
/* translate 对于行内元素是无效的 */
transform: translate(300px, 300px);
}
</style>
</head>
<body>
<div class="three">
<p></p>
</div>
<span>123</span>
</body>
1.3 Rotation de la valeur de conversion 2D
La rotation 2D fait référence à la rotation d'un élément dans le sens des aiguilles d'une montre ou dans le sens inverse dans un plan bidimensionnel.
Syntaxe : transformer:rotate( degré )
Points clés:
rotate contient des degrés et l'unité est le degré. Par exemple, rotate(45deg)
Lorsque l’angle est positif, il se fait dans le sens des aiguilles d’une montre ; lorsqu’il est négatif, il se fait dans le sens inverse des aiguilles d’une montre.
Le point central de rotation par défaut est le point central de l'élément
<style>
img {
width: 150px;
/* rotate(45deg) 顺时针45度 */
transform: rotate(45deg);
border-radius: 50%;
border: 5px solid palegreen;
/* 过渡写到本身上，谁做动画给谁加 */
transition: all 1.0s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="img/oldman.jpg" alt="">
</body>1.4 Transformation-origine du point central de la transformation 2D
Syntaxe : transform-origin : xy ;
Points clés:
Notez que les paramètres suivants x et y sont séparés par des espaces.
Le point central par défaut de la conversion xy est le point central de l'élément (50 % 50 %)
Vous pouvez également définir des pixels ou des noms d'orientation pour xy (en haut, en bas, à gauche, au centre)
<style>
div {
width: 200px;
height: 200px;
background-color: darkblue;
margin: 100px auto;
transition: all 0.1s;
/* 1.可以跟方位名词 */
transform-origin: left bottom;
/* 2. 默认的是50% 50% 等价于center center*/
/* 3. 可以是px，px */
}
div:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>1.5 Mise à l'échelle de la conversion 2D
Le zoom, comme son nom l'indique, peut effectuer un zoom avant et arrière. Tant que vous ajoutez cet attribut à un élément, vous pouvez contrôler s'il est agrandi ou réduit.
Syntaxe : transform : scale( x,y);
Avis:
Notez que x et y sont séparés par des virgules
transform:scale(1,1) : la largeur et la hauteur sont doublées par rapport à l'absence de grossissement.
transform:scale(2,2) : la largeur et la hauteur sont agrandies de 2 fois
transform:scale(2) : n'écrivez qu'un seul paramètre, le deuxième paramètre est le même que le premier paramètre, équivalent à scale(2,2)
transform:scale(0.5,0.5): réduire
Le plus grand avantage de la mise à l'échelle du sacle : vous pouvez définir la mise à l'échelle du point central de la transformation. La mise à l'échelle par défaut est basée sur le point central et n'affecte pas les autres cases.
<style>
div {
width: 200px;
height: 200px;
background-color: salmon;
margin: 100px auto;
/* transform-origin: left bottom; */
}
div:hover {
/* 1. 里面写的数字不跟单位，就是倍数的意思 1就是1倍 2就是2倍 */
/* transform：scale(x,y) */
/* transform: scale(2, 2); */
/* 2、修改了宽度为原来的2倍 高度不变 */
/* transform: scale(2, 1); */
/* 3、等比例缩放 同时修改宽度和高度， */
/* transform: scale(2); */
/* 4、小于1就是缩放 */
transform: scale(0.2);
/* scale 的优势之处:可以设置转换中心点缩放 */
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
</body>1.6 Méthode d'écriture complète de conversion 2D
Avis:
1. Utilisez plusieurs transformations en même temps, le format est : transform : translate() rotate() scale() ...etc.,
2. La commande affecte l'effet de conversion. (La rotation en premier changera la direction de l'axe des coordonnées)
3. Lorsque nous avons le déplacement et d'autres attributs en même temps, n'oubliez pas de mettre le déplacement en premier
<title>2D 转换综合写法</title>
<style>
div {
width: 200px;
height: 200px;
background-color: saddlebrown;
transition: all .5s;
}
/* 用空格隔开 */
div:hover {
/* transform: translate(150px, 50px) rotate(45deg); */
/* 同时有位移和其他属性，需要把位移放到最前面 */
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
}
</style>
</head>
<body>
<div></div>
</body>1.7 Résumé de la conversion 2D
Notre compréhension simple de la transformation est que la transformation peut être divisée en 2D et 3D.
Pour l’instant, nous avons appris trois choses : le déplacement, la rotation et la mise à l’échelle.
Le plus grand avantage du déplacement 2D translation(x, y) est qu'il n'affecte pas les autres boîtes. Les paramètres à l'intérieur sont calculés en % par rapport à sa propre largeur et hauteur.
Vous pouvez les écrire séparément, comme TranslateX(x) et TranslateY(y)
La rotation 2D (degré) peut réaliser le degré des éléments en rotation. L'unité est deg.
Les paramètres de la mise à l'échelle 2D sacle(x,y) sont des nombres sans unités et peuvent être des décimales. Le plus grand avantage est que cela n'affecte pas les autres cases.
Définissez le point central de la transformation transform-origin : xy ; le paramètre peut être un pourcentage, un pixel ou un nom d'orientation.
Lorsque nous écrivons de manière exhaustive et que nous avons le déplacement et d'autres attributs en même temps, n'oubliez pas de mettre le déplacement en premier