【HTML/CSS】transformプロパティって何？移動も回転も3Dだってできちゃう便利なプロパティ！

cssで「transformプロパティ」ってよく使いますけど、実はよく分かっていません……。

spica

transformプロパティは、要素に動きを付けるために使います。

設定次第で複雑な動きを付けることも可能です。

transformプロパティとは

transformプロパティとは、CSSの比較的新しいプロパティで、要素に動きを付ける役割があります。

transformプロパティでできること

移動、回転、拡大縮小、傾斜の4つが指定でき、複数組み合わせることも可能です。

.figure:hover .rotateX720 {
  -webkit-transform: translateX(200px) rotateX(720deg);
          transform: translateX(200px) rotateX(720deg);
}

また、2次元的動作だけでなく、3次元的動作にも対応しています。

よく似たプロパティに「transitionプロパティ」がありますが、transformが要素の変形を指定するのに対し、transitionは時間経過とともに要素を変化させるという違いがあります。

アニメーションにおいて両方とも欠かせないプロパティですので、違いを理解しておきましょう。

インラインレベル要素には効かない

transformが効かない例としてよくあるのが、spanなどのインラインレベル要素に指定してしまったケースです。

解決策としては、インライン要素に対して「display: inline-block;」を指定してインラインブロック要素にします。

ベンダープレフィックスが必要

transformプロパティは、各ブラウザで適切に表示されるためにベンダープレフィックスが必要です。

※コードが長くなるので、これ以降の記述ではベンダープレフィックスは省略します。

便利なツールを使えば、ベンダープレフィックスも面倒ではありません。

Autoprefixer CSS online

AutoprefixerisaPostCSSpluginwhichparsesyourCSSandaddsvendorprefixes

autoprefixer.github.io

transformプロパティの値

.none {
    transform: none;
}

移動：translate

X軸(横)方向またはY軸(縦)方向への移動距離を、単位付きの長さもしくはパーセント値でそれぞれ指定します。

.translate {
      transform: translate(50px, 20px);
}

引数が1つの場合はY軸方向への移動はしません。

X軸方向のみの移動を指定する場合は「translateX」、Y軸方向のみの移動を指定する場合は「translateY」を用います。

3D変形するには「translate3d」、Z軸(奥行)方向への移動を指定するには「translateZ」で指定します。

X軸方向とY軸方向への移動を両方指定するときは、「transform: translate(〇〇px, 〇〇px);」と記述し、「transform: translateX(〇〇px);」と「transform: translateY(〇〇px);」を併記しないようにしましょう。先に記述したほうが後から記述したほうに上書きされてしまい、うまく動作しなくなります。

EDIT ON CODEPENをクリック！

See the Pen translate by spica (@spica_blog) on CodePen.

.rotate {
      transform: rotate(45deg);
}

.scale {
      transform: scale(1.2, 1);
}

.skew {
      transform: skew(-15deg, -15deg);
}

マトリクス変形：matrix

6つの数値による、マトリクス変形を指定できます。

引数は、「X軸方向への拡大縮小率、Y軸方向への傾斜角度、X軸方向への傾斜角度、Y軸方向への拡大縮小率、X軸方向への移動距離、Y軸方向への移動距離」で、単位は付けません。

3Dマトリクス変形には、「matrix3d」を用い、単位の付かない16の引数を指定します。

.matrix {
     transform: matrix(1, -1, -3, 4, 3, 2);
}

transformをすべて理解して値を設定するのはなかなか難しいです。

ジェネレーターを使って値を取得するのもアリだと思います。

CSS3 Generator

CSS3を生成する簡単なジェネレーターです

ds-overdesign.com

transform関連のプロパティ

transform-originプロパティ

transformプロパティの基点は、初期値では中央(50%, 50%)になっています。

基点の位置を変更したい場合は、「transform-originプロパティ」を用います。

値には、位置を示すパーセント値または長さのサイズ値、もしくはキーワードの１,2個の組み合わせを指定します。

See the Pen Untitled by spica (@spica_blog) on CodePen.

基点が分かりやすいように親要素にtransitionを指定し、マウスカーソルが乗ったら変形するようにしてあります。

/* 親要素にtransitionを指定 */
.itemBox {
  transition: all .5s ease;
}

/* 子要素 */
.leftTop {
  transform-origin: left top;
}
.leftTop:hover {
  transform: rotate(15deg);
}
.rightTop {
  transform-origin: right top;
}
.rightTop:hover {
  transform: rotate(-15deg);
}
.leftBottom {
  transform-origin: 0% 100%;
}
.leftBottom:hover {
  transform: scale(1.2);
}
.rightBottom {
  transform-origin: 100% 100%;
}
.rightBottom:hover {
  transform: skew(15deg, 15deg);
}

transform-styleプロパティ

「transform-style」で、子要素の3D変形の扱いを指定することができます。

値は「flat(初期値)」か「preserve-3d」で、flatは3D変形した親要素に対して2D化(平面化)して表示され、preserve-3dは子要素自身に指定された3D空間内の配置が適用されます。

See the Pen transform-style by spica (@spica_blog) on CodePen.

/* 親要素にpreserve-3dを指定 */
.parentBox {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: yellow;
  transform-style: preserve-3d; /* 子要素3D化 */
  prespective: 500px; /* 子要素の遠近効果 */
}

/* 子要素 */
.childBox {
  width: 100px;
  height: 100px;
  background-color: green;
  transition: all .5s ease;
}
.childBox:hover {
  transform: rotate3d(1, 1, 1, 90deg);
}

perspectiveプロパティ

「perspective」を親要素に設定することで、子要素に遠近効果が生まれます。

子要素に「transform: perspective()」を設定しても同様の効果が得られます。

値は数値またはnone(初期値)で指定します。

値が大きいと距離感が遠く、値が小さければ距離感が近く、より遠近感を感じます。

また、perspectiveの値によってtransformの動作が変わってくることに気を付けなければなりません。

基点の指定には「perspective-origin」を用います。

See the Pen transform-style by spica (@spica_blog) on CodePen.

親要素に「perspect: 100px」、子要素に「transform: rotate3d(1,1,1,90deg)」のように記述します。

/* 親要素 */
.parentBox {
  perspective: 100px;
}

/* 子要素 */
.childBox1:hover {
  transform: rotate3d(1,1,1,90deg);
}

または、下記のように記述しても同様に動作します。

/* 子要素 */
.childBox1:hover {
  transform: perspective(100px) rotate3d(1, 1, 1, 90deg);
}

perspective-originプロパティ

「perspective-origin」を親要素に設定することで、ユーザーの視点を指定できます。

transform-originと同じように、値にはX軸とY軸の位置を指定します。

See the Pen Untitled by spica (@spica_blog) on CodePen.

/* 親要素 */
.parentBox1 {
  perspective-origin: top;  /* 上からの視点 */
}
.parentBox2 {
  perspective-origin: bottom; /* 下からの視点 */
}
.parentBox3 {
  perspective-origin: left; /* 左からの視点 */  
}
.parentBox4 {
  perspective-origin: right; /* 右からの視点 */  
}

/* 子要素をホバーした時 */
.childBox:hover {
  transform: rotateX(45deg);
}

複数の値を組み合わせる

要素に対して移動、回転、拡大縮小、傾斜などの2次元(2D)変形をするには、前述のtransformプロパティとtransform-originプロパティを使います。

半角スペースで区切って、複数の値を指定することができます。

transformは記述した左側から順に実行されるので、記述順によっては予想に反した結果になることもあります。

その場合は記述順を変更してみましょう。

.figure:hover .rotateX720 {
      transform: translateX(200px) rotateX(720deg);
}

See the Pen transform lesson by spica (@spica_blog) on CodePen.

要素を3D変形する

要素に対してZ軸(奥行)方向の指定を加えると、3次元(3D)変形も可能になります。

3D変形を実現するためには、ユーザーの視点である「perspective()」を指定する必要があります。

See the Pen transform 3d by spica (@spica_blog) on CodePen.

.translateZ:hover {
  transform: perspective(500px) translateZ(100px);
}
.translate3d:hover {
  transform: perspective(500px) translate3d(20px, 10px, 30px);
}
.rotateY {
  transform-origin: left center;
}
.rotateY:hover {
  transform: perspective(500px) rotateY(90deg);
}
.rotateX {
  transform-origin: center bottom;
}
.rotateX:hover {
  transform: perspective(500px) rotateX(90deg);
}
.rotateZ {
  transform-origin: right top;
}
.rotateZ:hover {
  transform: perspective(500px) rotateX(45deg) rotateZ(45deg);
}
.rotate3d:hover {
  transform: rotate3d(10, 10, 20, 180deg);
}
.scale3d:hover {
  transform: perspective(500px) scale3d(1.2, 1.2, 5) rotateX(45deg);
}
.scale3d_2:hover {
  transform: perspective(500px) scale3d(1.2, 1.2, 5) rotateY(45deg);
}

まとめ

transformって、こんなにおもしろいものだったんですね！

spica

デザインの幅が広がりますよね！

見出しやセクションのブロックなどに使ったり、ホバーやスクロールで変形させたり、使い道が無限大ですよ♪

transformプロパティ、transitionプロパティ、animetionプロパティはセットで使うことが多いです。

いろいろと練習して、扱いに慣れておきましょう。

【HTML/CSS】CSSだけでできる！animationプロパティで動きのあるサイトにしよう

【HTML/CSS】CSSだけでできる！animationプロパティと@keyframesで動きのあるサイトにしよう

spicaweblog.com

2022.05.09