Maison > Article > interface Web > Quelques traitements de déformation en CSS3
Quelques traitements de déformation en CSS3
- 零下一度original
- 2017-06-28 09:25:471376parcourir
Classification des déformations
-
Échelle
Utilisez la méthode d'échelle pour mettre à l'échelle le texte ou les images et spécifiez le rapport de mise à l'échelle dans les paramètres. Par exemple, "échelle (0,5)" signifie un zoom arrière de 50
-
inclinaison
Utilisez la méthode d'inclinaison pour redimensionner le texte ou les images, spécifiez l'angle d'inclinaison horizontal dans le champ paramètre L'angle d'inclinaison avec la direction verticale S'il n'y a qu'une seule valeur, c'est l'angle d'inclinaison avec la direction horizontale. L'unité est le degré.
Remarque : rotation signifie rotation, une seule valeur numérique, indiquant l'angle de rotation dans le sens horizontal.
-
Déplacer
Utilisez la méthode de traduction pour déplacer du texte ou des images Spécifiez le mouvement horizontal et le mouvement vertical dans les paramètres. S'il n'y a qu'une seule valeur, alors pour le mouvement horizontal. mouvement.
Méthodes de transformation multiples pour un élément
Exemple de format
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 5
<meta http-equiv="x-ua-compatible" content="IE=edge"> 6
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7
<title>测试</title> 8 </head> 9 <body>10 <section id="a-section1-3-b">a-section1-3-b</section>11
<section id="section1-4-b">section1-4-b</section>12 <style>13
[id $= 'b']{ /* id以b结尾的 */14 background-color: lightpink;15
-webkit-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);16
-moz-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);17
-ms-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);18
-o-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);19
transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);20
/*缩小50% 水平垂直方向倾斜30°（rotate只有水平旋转） 水平垂直移动30px*/21 }22
#a-section1-3-b{23 -webkit-transform-origin: left bottom;24
-moz-transform-origin: left bottom;25 -ms-transform-origin: left bottom;26
-o-transform-origin: left bottom;27 transform-origin: left bottom;28
/*更换变形原点*/ }
</style>
</body>
</html>Transformation point de base transformation-origine
Ce paramètre peut changer le point de base de la déformation, et sa valeur d'attribut représente "la position du point de base dans la direction horizontale de l'élément et la position du point de base dans la direction verticale de l'élément". Parmi elles, les valeurs qui peuvent être spécifiées dans « la position du point de référence dans la direction horizontale de l'élément » sont gauche, centre et droite, et les valeurs qui peuvent être spécifiées dans « la position du point de référence dans la direction verticale de l'élément" sont le haut, le centre et le bas.
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!