CSS3 の変形プロパティの関連実装手順

CSS3 の transform 属性 を使用すると、要素の形状を 2D と 3D の間で変更できることがわかっています。そこで、今日は CSS3 の変形属性について説明します。

最も重要な CSS3 の変更である Transform 属性。 2D と 3D で要素の形状を変化させます。

2D変形

degは度を表します。単位をそれより小さくすることはできません。度単位のみが存在し、他の単位はありません。

rotate(angle) は、パラメーターの X 軸と Y 軸に沿った角度

skew(x-angle,y-angle) の 2D 傾斜変換を指定します。

skewX(angle) X 軸に沿った 2D スキュー変換。

skewY(angle) Y 軸に沿った 2D スキュー変換。

scale(x,y)

X 軸と Y 軸に沿った 2D スケーリング変換。 1 より大きい: 拡大、0 ～ 1: 縮小。

scaleX(x) は、スケーリング変換を定義するために X 軸の値を設定します。

scaleY(y) は、スケーリング変換を定義するために Y 軸の値を設定します。

注:

変換なし: 変換: なし

複数の変換はスペースで区切られます。 ef:transform:scale(0.5) skew(10deg,20deg)rotate(30deg);

3D変形

2013年、GoogleはChrome36をローンチし、CSSが3D時代に入ったことを正式に発表しました。

translate3d(x,y,z) X、Y、Z 軸に沿った 3D 変換。

空間移動を変換します

translateX(x) 変換、X 軸の値を使用するだけです。

translateY(y) 変換では、Y 軸の値を使用するだけです。

translateZ(z) Z 軸の値のみを使用した 3D 変換。

rotate3d(x,y,z,angle) X、Y、Z 軸に沿った 3D 回転。

rotate 回転

rotateX(angle) X 軸に沿った 3D 回転。

rotateY(angle) Y 軸に沿った 3D 回転。

rotateZ(angle) Z 軸に沿った 3D 回転。

perspective(n) は、3D 変換要素の視点 view (被写界深度) を定義します。

上記の概要を読んだ後は、変形に関する知識を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

CSS3 を使用して徐々に光る四角形の境界線を作成する手順

HTML での互換性検証が必要なブラウザは何ですか?

word-wrap 属性の使用の詳細な説明と例CSS3 で

以上がCSS3 の変形プロパティの関連実装手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。