前回は、transform で、特定のコンテンツを自由に配置させる方法を紹介しました。

今回は、transform で、コンテンツを回転させる方法を紹介します。

基本のコードは、以下になります。

<div class="box box-1"></div>
body {
  padding: 50px;
}

.box {1  width: 200px;
  height: 200px;
  background-color: blue;
}

image2

コンテンツを回転させる

コンテンツを回転させるには、transform: rotate();を使用します。

カッコの中に角度を指定します。

例えば、30 度回転させたい場合、transform: rotate(30deg);と書きます。

.box-1 {
  transform: rotate(30deg);
}

ちなみに、deg は、degree の略で和訳すると『度』です。

ブラウザで確認すると、

image3

コンテンツが回転しました。

一周は 360 度なので、360 以上の値を入れても、(値 - 360)度回転します。

値は、マイナスでも可能です。

.box-1 {
  transform: rotate(-40deg);
}

image4

横軸を中心に回転させる

横軸を中心に回転させるには、transformrotateX();を設定します。

四角形を 80 度回転させてみます。

.box-1 {
  transform: rotateX(80deg);
}

ブラウザで確認すると、

image5

四角形が細長くなりました。

下の図のように中心を軸として、横軸(x 軸)を中心に回転しました。

image6

ちなみに rotateX を 90deg にすると、

image7

何も表示されなくなりました。

これは、真横になっているからです。

縦軸を中心に回転させる

横軸を中心に回転させるには、transformrotateY();を設定します。

四角形を 80 度回転させてみます。

.box-1 {
  transform: rotateY(80deg);
}

ブラウザで確認すると、

image8

四角形が、縦長になりました。

下の図のように中心を軸として、横軸(y 軸)を中心に回転しました。

image9

ちなみに rotateY を 90deg にすると、何も表示されなくなります。

回転のアニメーションなどで使用することになりますので、ぜひ試してみてください。

ブログ一覧