CSS変換

CSSの操作方法transformプロパティ

変換を使用すると、2Dまたは3D空間で要素を平行移動、回転、拡大縮小、および傾斜させることができます。これらは、特にアニメーションと組み合わせると、非常に優れたCSS機能です。

2D変換

ザ・transformプロパティはこれらの関数を受け入れます。

  • translate()要素を移動するには
  • rotate()要素を回転させる
  • scale()要素のサイズをスケーリングする
  • skew()要素をねじったり傾けたりする
  • matrix()6つの要素の行列を使用して上記の操作のいずれかを実行する方法。構文はユーザーフレンドリーではありませんが、冗長ではありません。

軸固有の機能もあります。

  • translateX()X軸上で要素を移動します
  • translateY()Y軸上で要素を移動します
  • scaleX()X軸上で要素のサイズをスケーリングする
  • scaleY()Y軸上で要素のサイズをスケーリングする
  • skewX()X軸上で要素をねじったり傾斜させたりする
  • skewY()Y軸上で要素をねじったり傾斜させたりする

これは、を変更する変換の例です。.box要素の幅を2倍（複製）、高さを0.5倍（半分に縮小）：

.box {
	transform: scale(2, 0.5);
}

transform-origin原点を設定しましょう（(0, 0)座標）変換のために、回転中心を変更しましょう。

複数の変換を組み合わせる

各関数をスペースで区切ることにより、複数の変換を組み合わせることができます。

例えば：

transform: rotateY(20deg) scaleX(3) translateY(100px);

3D変換

さらに一歩進んで、要素を2D空間ではなく3D空間に移動することができます。 3Dでは、別の軸Zを追加します。これにより、ビジュアルに奥行きが加わります。

を使用してperspectiveプロパティでは、3Dオブジェクトがビューアからどれだけ離れているかを指定できます。

例：

.3Delement {
  perspective: 100px;
}

perspective-origin視聴者の位置の外観を決定し、X軸とY軸でどのように見ているかを決定します。

これで、Z軸を制御する追加の関数を使用できます。これにより、他のX軸とY軸の変換が追加されます。

  • translateZ()
  • rotateZ()
  • scaleZ()

および対応する速記translate3d()、rotate3d()そしてscale3d()を使用するための速記としてtranslateX()、translateY()そしてtranslateZ()関数など。

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル：


Tech Wiki Online！