Webサイトでは、様々なポイントで要素に動きをつけることが多々あります。
その際に活用できるのが、transformプロパティを使用して要素の移動や変形を行う方法です。
今回の記事では、CSSで transformプロパティを使用する方法について解説していきたいと思います。
プロパティで指定できる関数の使い方や、複数の効果を適用させる方法など、詳しく説明していきたいと思いますので、ぜひ参考にしてみてください。
CSSのtransformとは？
transformプロパティは、対象の要素を移動させる、傾ける、回転させるなどといったように、ある特定の状態から変形させたい場合に使用するプロパティです。
例えばマウスオーバーやクリック、あるいはページの読み込みやスクロール時など、任意のタイミングで要素に動きをつける際に活用されています。
transformの使い方
transformプロパティの値には、以下の４つの関数を指定することができます。
- scale（伸縮）
- translate（移動）
- rotate（回転）
- skew（傾斜）
それぞれの使い方や効果の違いについて、順に見ていきましょう。
transform: scale()
要素の拡大・縮小を行いたい場合に使用するのが、scale関数です。
「マウスを合わせると画像のサイズが変わる」 といったようなWebサイトでもよく見かける動きを、この関数で実現することができます。
scale関数の引数には、x軸とy軸の伸縮率をそれぞれ指定することができます。
transform: scale(x軸, y軸);伸縮率は、1を等倍とした場合の比率で決定されます。
両方の軸を同じ倍率で伸縮させる場合は、1つの引数で適用させることも可能です。
【サンプルコード】
<div class="sampleBoxScale"></div>.sampleBoxScale {
width: 100px;
height: 100px;
margin: 80px 80px;
background-color: red;
transition: .5s;
}
.sampleBoxScale:hover {
transform: scale(1.5);
}【表示例】
transform: translate()
要素の表示位置を変更したい場合に使用するのが、translate関数です。
この関数を使用することにより、要素の位置を任意のサイズ分だけ移動させることができます。
transform: translate(x軸, y軸);値の指定には、pxや%など、サイズ指定で使用可能な単位がそのまま適用可能です。
引数が1つのみの場合は x軸の移動に適用されるため、y軸を単体で指定したい場合は後述する translateY関数を使用してください。
【サンプルコード】
<div class="sampleBoxTranslate"></div>.sampleBoxTranslate {
width: 100px;
height: 100px;
margin: 80px 80px;
background-color: red;
transition: .5s;
}
.sampleBoxTranslate:hover {
transform: translate(50px);
}【表示例】
translate: rotate()
rotate関数を使用すると、対象の要素を回転させることができます。
transform: rotate(角度);引数には、要素を回転させる角度を指定します。
正の数の場合は時計回り、負の数の場合は半時計回りの方向に指定した角度まで要素が回転します。
【サンプルコード】
<div class="sampleBoxRotate"></div>.sampleBoxRotate {
width: 100px;
height: 100px;
margin: 80px 80px;
background-color: red;
transition: .5s;
}
.sampleBoxRotate:hover {
transform: rotate(45deg);
}【表示例】
rotate関数についてはこちらの記事でより詳しい使い方を解説しているので、ぜひ合わせて参考にしてみてください。
transform: skew()
対象の要素を一定の角度に傾けたい場合は、skew関数を使用します。
transform: skew(x軸, y軸);translate関数と同様に、引数が1つのみの場合はx軸(水平方向) での傾斜に適用されるため、y軸を単体で指定したい場合は skewY関数を使用しましょう。
【サンプルコード】
<div class="sampleBoxSkew"></div>.sampleBoxSkew {
width: 100px;
height: 100px;
margin: 80px 80px;
background-color: red;
transition: .5s;
}
.sampleBoxSkew:hover {
transform: skew(45deg);
}【表示例】
変形・移動・回転を X / Y / Z 軸それぞれで行う
上記で紹介した関数の他に、x軸、y軸、z軸のそれぞれを単体で指定できる関数が用意されています。
例えば、translateの場合は translateX、translateY、translateZといったように、「~X() / ~Y() / ~Z()」 の形式で各軸に対応する関数が存在します。
どの軸に対して適用しているかを明示的に示したい場合や、単一の引数では指定できないy軸やz軸に適応したい場合に活用することができます。
【サンプルコード】
<div class="sampleBoxX"></div>
<div class="sampleBoxY"></div>
<div class="sampleBoxZ"></div>.sampleBoxX {
width: 100px;
height: 100px;
margin: 80px 80px;
background-color: red;
transition: .5s;
}
.sampleBoxY {
width: 100px;
height: 100px;
margin: 80px 80px;
background-color: blue;
transition: .5s;
}
.sampleBoxZ {
width: 100px;
height: 100px;
margin: 80px 80px;
background-color: yellow;
transition: .5s;
}
.sampleBoxX:hover {
transform: translateX(50px);
}
.sampleBoxY:hover {
transform: translateY(50px);
}
.sampleBoxZ:hover {
transform: perspective(400px) translateZ(50px);
}【表示例】
transformの中で関数が適用される順序に気を付けよう
複数の関数を適用する場合に重要なのが、関数を記述する順番です。
どの関数を先に記述するかで、表示結果が大きく変わる場合があるため、注意する必要があります。
まずは、以下の例を見てみてください。
<div class="sampleBox"></div>.sampleBox {
width: 100px;
height: 100px;
margin: 80px 80px;
background-color: red;
transition: .5s;
}
.sampleBox:hover {
transform: perspective(400px) translateX(50px) rotate(45deg);
}【表示結果】
要素にマウスを合わせると、回転しながら横方向に水平に移動するのが分かりますね。
では、以下のように関数の順番を変えてみるとどうでしょうか？
<div class="sampleBoxAlt"></div>.sampleBoxAlt {
width: 100px;
height: 100px;
margin: 80px 80px;
background-color: red;
transition: .5s;
}
.sampleBoxAlt:hover {
transform: perspective(400px) rotate(45deg) translateX(50px);
}【表示結果】
移動する方向が水平でなくなったのが分かるでしょうか？
このように、transformプロパティで使用する関数は、記述する順番によって結果が変わってしまう場合があります。
いくつかの関数を同時に扱う際は、想定する動作になっているかどうかをよく確認し、関数の記述順に気を付けるようにしましょう。
【最新CSS対応】scale / translate / rotateプロパティで操作する
scale / translate / rotate の3つについては、関数ではなくそれぞれが独立したプロパティとして設定することもできます。
【サンプルコード】
<div class="sampleBoxTransform"></div>.sampleBoxTransform {
width: 100px;
height: 100px;
margin: 80px 80px;
background-color: red;
transition: .5s;
}
.sampleBoxTransform:hover {
translate: 50px 30px;
rotate: 45deg;
scale: 1.5;
}【表示結果】
それぞれの関数との大きな違いは、z軸を指定することができる（scale3d()など、それぞれの~3d関数に相当する）点にあります。
記述のしやすや設定内容に合わせて、使いやすい方を選ぶといいでしょう。
まとめ
いかがでしたか？今回は、transformプロパティの使い方について解説しました。
関数の組み合わせ次第で、様々な動きを要素につけることができるのが transformプロパティのメリットの1つです。
それぞれの関数の効果や使い方をしっかりと把握して、実際の開発でも使いこなせるよう練習しておきましょう。
HTML/CSSの学習方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、HTML/CSSに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
