Quelques traitements de déformation en CSS3-tutoriel HTML-php.cn

Quelques traitements de déformation en CSS3

零下一度

Libérer： 2017-06-28 09:25:47

original

1396 Les gens l'ont consulté

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>

Copier après la connexion

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!