ホームページ > 記事 > ウェブフロントエンド > CSS3での変形加工の一部
スケールメソッドを使用してテキストまたは画像の拡大縮小を実現し、パラメータで拡大縮小率を指定します。たとえば、「スケール (0.5)」は 50 ずつズームアウトすることを意味します
テキストまたは画像のスケーリングを実現するには、スキュー方法を使用します。 で水平方向の傾斜角度と垂直方向の傾斜角度を指定します。パラメータの値が 1 つだけの場合、水平方向の傾斜角度です。単位は度です。
注: rotate は回転を表し、水平方向の回転角度を示す 1 つの数値のみです。
パラメータで水平移動と垂直移動を指定するには、translate メソッドを使用します。値が 1 つしかない場合、それは水平移動です。
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>
このパラメータは変換基点を変更することができ、その属性値は「要素内の基点の位置」を表します要素の水平方向,要素の垂直方向の基点の位置です。このうち、「要素の横方向の基準点の位置」で指定できる値は左、中央、右であり、「要素の位置」で指定できる値は左、中央、右です。 「要素の垂直方向の基準点」は、上、中央、下です。
以上がCSS3での変形加工の一部の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。