新着！私の44ページの電子書籍「CSS in 44 minutes」が発売されました！ 😃

今すぐ入手 →

#transform

要素の変換方法を定義します。

default transform: none;

すべての変換を削除します。

transform: translateX(40px);

要素を水平方向に移動します。

transform: translateY(20px);

要素を垂直方向に移動します。

transform: translateY(100%);

パーセンテージ値を使用できます。パーセンテージは要素自身に対する相対値であり、親要素ではありません。

transform: translate(20px, -10%);

translate()に2つの値を使用できます。

  • 最初の値は水平軸用です。
  • 2番目の値は垂直軸用です。

transform: scaleX(1.5);

要素を水平方向に拡大縮小します。

transform: scaleY(0.4);

要素を垂直方向に拡大縮小します。

transform: scaleY(-2);

負の値を使用できます。要素が反転します。

transform: scale(0.8, 0.8);

scale()に2つの値を使用できます。

  • 最初の値は水平軸用です。
  • 2番目の値は垂直軸用です。

両方に同じ値を使用することで、比例して拡大縮小できます。

transform: rotate(45deg);

要素を回転させます。

使用できます。

  • 0から360degの度数
  • 0から400gradのグラジアン
  • 0から2πradのラジアン
  • 0から1turnのターン

transform: skewX(15deg);

要素を水平方向に傾けます。

transform: skewY(45deg);

要素を垂直方向に傾けます。

transform: skew(10deg, -20deg);

skew()に2つの値を使用できます。

  • 最初の値は水平軸用です。
  • 2番目の値は垂直軸用です。

transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);

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