前回は、transform で、特定のコンテンツを拡大・縮小させる方法を紹介しました。

今回は、transform で、コンテンツを斜めにする方法を紹介します。

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

<div class="box box-1"></div>
<div class="box box-2"></div>

image2

コンテンツを横方向に向かって斜めにする

コンテンツを横方向に向かって斜めにするには、transform: skewX();を設定します。

カッコの中には、傾斜角度を指定します。

例えば、四角形を横方向に向かって 45 度斜めにしたい場合、transform: skewX(45deg);を設定します。

.box-1 {
  background-color: blue;
  transform: skewX(45deg);
}

ブラウザで確認すると、

image3

四角形が、横方向に向かって斜めになりました。

skewX()とは、図のように X 軸を中心に、それぞれ X 軸方向へ傾斜するということです。

image4

コンテンツを縦方向に向かって斜めにする

コンテンツを縦方向に向かって斜めにするには、transformskewY();を設定します。

カッコの中には、傾斜角度を指定します。

例えば、四角形を縦方向に向かって 30 度斜めにしたい場合、transform: skewY(30deg);を設定します。

.box-1 {
  background-color: blue;
  transform: skewY(30deg);
}

ブラウザで確認すると、

image5

四角形が、横方向に向かって斜めになりました。

skewY()とは、図のように Y 軸方向へ傾斜するということです。

image6

コンテンツを横と縦方向に向かって斜めにする

コンテンツを横と縦方向に向かって斜めにするには、transformskew(◯, □);を設定します。

skew()の ◯ には横の傾斜角度、□ には、縦の傾斜角度を指定します。

例えば、四角形を横方向に 30 度、縦方向に 45 度斜めにしたい場合、transform: skew(30deg, 45deg);を設定します。

.box-1 {
  background-color: blue;
  transform: skew(30deg, 45deg);
}

ブラウザで確認すると、

image7

四角形が斜めになりました。

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

ブログ一覧