CSS3での変形加工の一部

変形分類

• スケール

  スケールメソッドを使用してテキストまたは画像の拡大縮小を実現し、パラメータで拡大縮小率を指定します。たとえば、「スケール (0.5)」は 50 ずつズームアウトすることを意味します

• tilt

  テキストまたは画像のスケーリングを実現するには、スキュー方法を使用します。 で水平方向の傾斜角度と垂直方向の傾斜角度を指定します。パラメータの値が 1 つだけの場合、水平方向の傾斜角度です。単位は度です。

  注: rotate は回転を表し、水平方向の回転角度を示す 1 つの数値のみです。

• Move

  パラメータで水平移動と垂直移動を指定するには、translate メソッドを使用します。値が 1 つしかない場合、それは水平移動です。

要素に対する複数の変換メソッド

フォーマットの例

 1 nbsp;html> 2  3  4     
 <meta> 5     
 <meta> 6     
 <meta> 7     
 <title>测试</title> 8  9 10 <section>a-section1-3-b</section>11 
 <section>section1-4-b</section>12 <style>13     
 [id $= &#39;b&#39;]{ /* 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>
  
 

変換基点transform-origin

このパラメータは変換基点を変更することができ、その属性値は「要素内の基点の位置」を表します要素の水平方向,要素の垂直方向の基点の位置です｡このうち、「要素の横方向の基準点の位置」で指定できる値は左、中央、右であり、「要素の位置」で指定できる値は左、中央、右です。 「要素の垂直方向の基準点」は、上、中央、下です。

以上がCSS3での変形加工の一部の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。