【CSS入門】transformで移動、回転、伸縮、傾斜ができる！

transformは動きを出すプロパティ
1. どんな使い道？
2. 組み合わせても使える
まとめ

transformは動きを出すプロパティ

transform（トランスフォーム）とは訳すと変形させるという意味です。

使い道としては、移動、回転、伸縮、傾斜の4タイプがあります。

どんな使い道？

関数名	効果
translate(トランスレイト)	移動させる
rotate(ローテイト)	回転させる
scale(スケール)	拡大縮小させる
skew(スキュー)	傾斜させる

translate(移動)の使い方

例

例

<style>
.translate{
  width:100px;
  height:100px;
  transition-duration: 1s;
  background:red;
  margin:30px auto 0 auto;
  text-align:center;
  border-radius: 20px;
}

.translate:hover { transform:translateX(30px); }
</style>
<div class="translate">触れると横にずれる</div>

触れると横にずれる

.セレクタ{

transform:translateX(30px); }

指定なしなら(X.Y)です。
Xなら横軸だけです。プラスは右、マイナスは左です。
Yなら縦軸だけです。プラスは下、マイナスは上です。

rotate(回転)の使い方

例

例

<style>
.rotate {
  width:100px;
  height:100px;
  transition-duration: 1s;
  background:red;
  margin:30px auto 0 auto;
  text-align:center;
  border-radius: 20px;
}

.rotate:hover { transform:rotate(720deg); }
</style>
<div class="rotate">触れるとまわる</div>

触れるとまわる

セレクタ{

transform:rotate(720deg); }

degは角度の単位です。

指定なしならプラスは時計回り、マイナスは反時計周りです。
Xなら横軸を起点に回転
Yなら縦軸を起点に回転

scale(拡大縮小)の使い方

例

例

<style>
.scale {
    width:100px;
    height:100px;
    margin:30px auto 0 auto;
    text-align:center;
    transition-duration: 1s;
    background:red;
    border-radius: 20px;
}
    .scale:hover {
        transform:scale(5,3.7);
    }
</style>
<div class="scale">触れると巨大化</div>

触れると巨大化

セレクタ{
transform:scale(5,3);

(X,Y)で拡大、縮小方向が決められます。

skew(傾斜)の使い方

例

例
<style>
.skew {
    width:100px;
    height:100px;
    margin:30px auto 0 auto;
    text-align:center;
    transition-duration: 1s;
    background:red;
    border-radius: 20px;
}
    .skew:hover {
        transform:skew(30deg,30deg);
    }
</style>
<div class="skew">触れると歪む</div>

触れると歪む

{
transform:skew(30deg,30deg);
}

組み合わせても使える

触れるとまわって変化する

例
<style>
.trlate{
  width:100px;
  height:100px;
  transition-duration: 1s;
  background:red;
  border-radius: 20px;
}

.tr:hover { transform:translateX(200px)rotate(720deg)scale(-1); }
</style>
<div class="tr">触れるとまわって変化する</div>

{ transform:translateX(200px)rotate(720deg)scale(-1); }

このように並べて使うこともできます。

まとめ

ちょっと動きがあるだけでだいぶ違いますよね。