CSS3のtransform属性

CSS3では、変形機能を利用して、文字や画像の回転、拡大縮小、傾き、移動の4種類の変形処理を実現できます。

一.rorate(回転)

使用法:transform: rorate(45deg);

パラメータ「角度」が 1 つあり、単位 deg は角度を意味し、正の数値は時計回りの回転を意味し、負の数値は反時計回りの回転を意味します。コード関数は時計回りに 45 度回転します。

II.scale(scale)

使用法:transform:scale(0.5,3);

最初のパラメータは水平方向のスケーリングを表し、2 番目のパラメータは垂直方向のスケーリング係数を表します。

三.skew(tilt)

使用法:transform:skew(30deg, 30deg);

スキューのデフォルトの原点は、このオブジェクトの中心点であるtransform-originです。

最初のパラメータは水平方向の傾斜角を表し、2番目のパラメータは垂直方向の傾斜角を表します。

IV.translate(move)

使用法:transform:translate(45px, 150px);

最初のパラメータは水平方向の 45 ピクセルの距離を表し、2 番目のパラメータは垂直方向の 150 ピクセルの移動を表します方向の距離。

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