ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3のtransform属性

CSS3のtransform属性

一个新手
一个新手オリジナル
2017-09-13 10:14:252364ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。