CSS3でのtransform属性の使用に関するチュートリアル

今回は、transform属性について話しましょう。これは、形状プロパティを変更し、要素が2Dと3Dの間で行き来できるようにする最も重要なCSS3属性です。

1. 2D 変形

deg は度を表します。単位はそれ以下にすることはできません。単位は 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);

2. 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 の border-image 属性の詳細な紹介

JS と HTML を使用して簡単なスケッチパッド コードを作成する

CSS3 で word-break 属性を使用するチュートリアル

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