CSS transform 要素を移動/回転/拡大縮小する

CSSのtransformプロパティで、要素を移動/回転/拡大縮小するサンプルです。

目次

仕様 transformプロパティの仕様
サンプル 要素を移動させる(translate)
  要素を回転させる(rotate)
  要素を拡大縮小させる(scale)
  要素に傾斜をつける(skew)

transformプロパティの仕様

transform: 各種関数

要素を移動させる(translate)

test

 

上記サンプルのコードです。

<style>
  #test1 {
    transform: translate(10px, 10px);
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
  .original {
    border: 1px dotted #000;
    background-color: #d1dada;
    width: 300px;
    height: 50px;
  }
</style>
<body>
  <div class="original">
    <div id="test1">test</div>
  </div>
</body>

3行目は、translate関数で右に10px,下に10px移動させます。
この数値をマイナスにした場合は、左と上に移動します。
数値+%の指定も可能です。
translateX(数値+単位)とした場合は水平のみの移動になります。
translateY(数値+単位)とした場合は垂直のみの移動になります。

 

要素を回転させる(rotate)

test

 

上記サンプルのコードです。

<style>
  #test2 {
    transform: rotate(3deg);
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
  .original {
    border: 1px dotted #000;
    background-color: #d1dada;
    width: 300px;
    height: 50px;
  }
</style>
<body>
  <div class="original">
    <div id="test2">test</div>
  </div>
</body>

3行目は、rotate関数で回転させます。単位はdegです。
この数値をマイナスにした場合は、逆に回転します。

 

要素を拡大縮小させる(scale)

test

 

上記サンプルのコードです。

<style>
  #test3 {
    transform: scale(1.1, 0.8);
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
  .original {
    border: 1px dotted #000;
    background-color: #d1dada;
    width: 300px;
    height: 50px;
  }
</style>
<body>
  <div class="original">
    <div id="test3">test</div>
  </div>
</body>

3行目は、scale関数で横を1.1倍,縦を0.8倍にしています。
scaleX(数値)とした場合は縦のみ変更されます。
scaleY(数値)とした場合は横のみ変更されます。

 

要素に傾斜をつける(skew)

test

 

上記サンプルのコードです。

<style>
  #test4 {
    transform: skew(6deg, 3deg);
    border: 1px solid #000;
    background-color: #e0ffff;
    width: 300px;
    height: 50px;
  }
  .original {
    border: 1px dotted #000;
    background-color: #d1dada;
    width: 300px;
    height: 50px;
  }
</style>
<body>
  <div class="original">
    <div id="test4">test</div>
  </div>
</body>

3行目は、skew関数で傾斜をつけます。単位はdegです。
この数値をマイナスにすると逆方向になります。
skewX(数値+単位)とした場合は水平のみの傾斜になります。
skewY(数値+単位)とした場合は垂直のみの傾斜になります。

関連の記事

CSS transition アニメーションするサンプル

△上に戻る