transformプロパティ

デメリット

• 「hover」などのトリガーが必要
• A→Bの処理しか変化できない
• ループできない
• より複雑なアニメーションは「animation」プロパティを使用する

移動

• transform: traslate(10px, 20px);
• x軸に10px、y軸に20px移動
• 右に10px、下に20px
• -10pxみたいにすると逆側に移動できる

片側だけの指定

• transform: traslateX(10px);
• 右に10px移動

回転

• transform: rotate(45deg);
• 45度、時計回りに回転

拡大・縮小

• transform: scale(1, 2);
• x軸方向に1倍、y軸方向に2倍で拡大

まとめて指定も可能

• transform: scale(.5);
• x軸、y軸ともに0.5倍に縮小

片側指定も可能

• transform: scaleX(.5);
• x軸のみ0.5倍に縮小

※インライン要素に対しては無効

• block、inline-blockにする必要あり

transform-origin（変形の起点に関して）

• デフォルトの変形の起点は要素の中心
• 回転も拡大も要素の中心を起点とする

起点を変更できる

左上を起点にしたい場合

• transform-origin: top left;と指定すると左上起点に変化する

translate（移動）はtransform-originの影響を受けない

• ただ単に移動するだけなので指定してもしなくても同様の動きになる

変形を組み合わせる方法

• 変形に関してそれぞれのプロパティを指定した場合には1番下に指定したもののみ反映される
• 下記の場合、transform: scale(1, 2);のみ反映

transform: transform: rotate(45deg);
transform: scale(1, 2);

まとめて指定する必要がある

transform: transform: rotate(45deg), scale(1, 2);

指定する順序で挙動が異なるので注意

• 下記はそれぞれ動きが異なる
• 右側の記述から処理が走る

transform: transform: traslateX(10px), transform: rotate(45deg);

transform: rotate(45deg), transform: traslateX(10px);

transform-originが変化しないため右下にまで移動する動きとなる

transform: rotate(45deg), transform: traslateX(10px);

• 右に10px移動した後、移動前の起点を中心に回転するため、右下に移動する形になる
• 処理としては順序があるが、実際の動きは同時（開始地点からそのまま右下に移動）となるので注意

transition-delay（処理の遅延操作）

• transition-delay: 1s;と記述すると、1秒経ってから処理を開始できる

transition-timing-function（処理の動き方）

transition-timing-function: ease;

• 初期値
• ゆっくり速度が上がってゆっくり速度が落ちる

transition-timing-function: ease-out;

• easeより動き始めを速くできる
• 小さいUI部品などに

transition-timing-function: ease-in-out;

• easeより動き始めを遅くできる
• 大きいUI部品などに

transition-timing-function: ease-in-out;

• 同じ速度でロボットのように動く
• 回転する部品などに（ローディングアイコンなど）

まとめて指定可能

• transition: transform 2s linear 1s
• ↑↑↑このようにまとめて指定可能
• 数値が2つ指定された場合、最初がtransition-duration（処理にかける時間）、2つ目がtransition-delay（処理の遅延）となる
• その他の指定は順序とくに決まりなく指定可能

複数のプロパティを設定

• transitionは複数設定できない。1番下のものが反映されるのでまとめて記述する必要あり
• カンマ区切りで記述
• transition: transform 1s, border-radius 1s;

@charset "utf-8";

.box {
  width: 80px;
  height: 80px;
  background: pink;
  /* transition: transform 1s; */
  /* transition: border-radius 1s; */
  transition: transform 1s, border-radius 1s;
}

.box:hover {
  transform: translateX(100px);
  border-radius: 50%;
}