【初学者向け】使い方を解説!transformで動きをつける

こんにちは。そろそろ炊飯器を新調したいと考えているサイトウです。

ホームページを見ていて、ボタンにカーソルをあてたら、ボタンが動いたことありませんか?ボタンの位置がずれたり、回転したりすることもあるかもしれませんね。

実はこれ、CSSで実装可能なのです!驚きましたか?

Webサイトで「動き」というとJavaScriptを思い浮かべる方も多いと思います。一方、CSSというと色や形、配置を指定するものというイメージが強いですよね。

   うーん。なんだか難しそう・・・

大丈夫です。ポイントを押さえれば誰でも使いこなすことができるようになります。

今回は、【transform】の

・基本的な使い方
・応用的な使い方

について説明します。プログラミング初学者の方やtransformの使い方を知りたい方、サイトの装飾を華やかにしたい方は是非読んでみてくださいね。

transform】とは

transform】の読み方

トランスフォームと読みます。「trans」が変換、「form」が形という意味で、2つの言葉が合わさって「形を変換する=変形する・変化する」という意味になりました。「要素を変形させる」と覚えると忘れにくいですよ。

transform】の説明

要素に動きをつけることができるプロパティです。transformプロパティの値にtransform関数を指定することで、変形・移動・縮尺・傾斜などを適用することができます。

transform】で利用できる値

transform】では以下の値を使うことができます。

説明
translate 要素を移動させます。
rotate 要素を回転させます。
scale 要素を拡大縮小させます。
skew 要素に傾斜をつけます。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 3.5~ 対応
Internet Explorer 9~ 対応
Opera 11.5~対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

transform】の基本的な使い方

transform】の使い方

下記のように「transformプロパティ:transform関数(数値で指定);」と書きます。

では、それぞれの値を見ていきましょう。

translate 要素を移動させる

上記の例を再度見てください。最初の数値がX軸、次の数値がY軸の数値で、どちらもpxや%などの数値で指定します。

X軸は横方向の動きを表し、正の値の場合は右方向に、負の値の場合は左方向に動きます。Y軸は縦方向の動きを表し、正の値の場合は下方向に、負の値の場合は上方向に動きます。どちらか一方を指定することも可能です。

See the Pen
GRjQjgv
by F Saito (@kero23)
on CodePen.

わかりやすいように:hoverをつけて、カーソルが要素に重なった時に動くようにしています。transformプロパティは、状態を指定する「疑似クラス」というキーワードを一緒に使うことも多いです。

注意

上記のように別々に指定すると最後に書かれた指示しか実行されません。X軸、Y軸の両方を指定したい時には一括で指定しましょう

rotate 要素を回転させる

数値にdegをつけて指定します。正の値は右方向に、負の値は左方向に回転します。

See the Pen
MWjQjGW
by F Saito (@kero23)
on CodePen.


scale 要素を拡大縮小させる

scaleでは、値に「px」などの単位を設定する必要はありません。「1.5」と書けば、要素の1.5倍、「0.5」と書けば、要素の0.5倍となります。負の値を指定すると縮小します。

See the Pen
yLavaRL
by F Saito (@kero23)
on CodePen.


skew 要素に傾斜をつける

数値にdegをつけて指定します。下記の例はX軸・Y軸ともに正の値ですが、負の値にすると反対方向に傾斜します。

See the Pen
MWjQjzY
by F Saito (@kero23)
on CodePen.

transformプロパティは、学習を進めると複雑な3Dの表示が可能になりますので、ぜひマスターしましょう!

ベンダープレフィックスを指定する

transformは比較的新しいプロパティのため、古いパソコンやブラウザによっては対応していない場合があります。しかし、プロパティの頭にベンダープレフィックスをつけると、対応不可のブラウザでもきちんと表示されるようになります。下記のようなものを見たことはありませんか?

下記のように、ブラウザによってベンダープレフィックスが異なっています。

  • -webkit-・・・GoogleChrome / Safari
  • -moz-・・・Firefox
  • -ms-・・・Internet Explorer
  • -o-・・・Opera

新しいプロパティを使用するときは、ベンダープレフィックスを忘れずに書くようにしましょう。

transform】と類似する要素との違い

transformと似たプロパティに「transition」があります。transitionは色や大きさなどが変わる時間を設定するときに使われるプロパティです。

transformとtransitionは一緒に使うケースも多く「要素に動きをつける」という意味では、知っておいたほうが良いプロパティです。先ほどのtranslateの例にtransitionを追加してみます。

See the Pen
MWjQjKR
by F Saito (@kero23)
on CodePen.


動きが滑らかになりますね。時間や変化の度合いの詳細を指定したい時は、ぜひ一緒に使ってみましょう。

transform】の応用的な使い方

transform関数をスペースで区切って複数指定すると、複数のtransform効果を適用することができます。例えば、translateとscale組み合わせてみます。

See the Pen
eYdVBmd
by F Saito (@kero23)
on CodePen.

手前に飛び出してくるような印象になりました。さらにskewを組み合わせてみましょう。

See the Pen
zYKRovZ
by F Saito (@kero23)
on CodePen.

組み合わせ次第で様々な表現ができそうですね!はじめのうちはどのくらいの数値でどの程度動くのか見当がつかないと思います。実際に自身でコードを書き、少しずつ数値を変えて試してみましょう。

考えるより手を動かしてみるのがおすすめです。「迷ったら書いてみる」を忘れずに学習を進めてくださいね。

まとめ

いかがでしたか?今回は要素に動きをつける「transformプロパティ」について紹介しました。

新しいことを学ぶたびに、ますますプログラミング学習が面白くなってきませんか?CSSを楽しく学んで、サイト作りの可能性を広げていきましょう。この記事が少しでもお役に立てればうれしいです。

 

参考文献:2019年 株式会社かんき出版|文系でもプログラミング副業で月10万円稼ぐ!【著】日比野 新

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?