CSS【CSS入門】transformで図形の形を変える方法をパターン別に紹介ryo2018/11/252019/3/27この記事ではCSSのtransoformプロパティについて解説します!transformでは指定した要素に対して2Dや3Dの変形をさせることが出来ます。・transformで何が出来るのか・transformのscale、rotate、translate、skewの挙動について解説していきます。まとめtransformとはまずはtransoformとは何かを知っておきましょう。transformは要素に対して2Dや3Dの変形をさせることが出来ます。きなどを指定することが出来ます。このような変形は図形をイメージしがちですが、文字などの要素に対しても適用させることが出来ます。それでは早速、それぞれの変形について見ていきましょう。transformを使ってみようそれではtransformを使ってみましょう。・scale(拡大縮小)・rotate(回転)・translate(移動)・skew(傾き)の4つについて、コードや実行結果を交えながら解説します。scaleそれではtransformのscaleについて見てみましょう。scaleでは倍率を指定した拡大縮小をすることが出来ます。こちらのコードをご覧ください。</div></body>実行結果このコードでは、transformのscaleを使って、X軸方向に0.5倍、Y軸方向に0.5倍をしています。今回は2つの引数を渡しましたが、今回の例のように同じ倍率で拡大縮小を行うのであれば、1つの引数を渡しても構いません。この他にも、scaleX、scaleY、scaleZなどを使うことで、それぞれの軸のみについて拡大縮小をすることが出来ます。scale3Dを使うと3つの引数で、X軸、Y軸、Z軸で拡大縮小の比率を変えることが出来ます。rotateそれでは次にrotateについて見てみましょう。rotateでは回転角度を指定して要素を回転をさせることが出来ます。こちらのコードをご覧ください。</div></body>実行結果このコードでは、transformのrotateを使って、時計回りに90度の回転をしています。引数にマイナスの符号をつけると、反時計回りの回転になります。この他にもrotateX、rotateY、rotateZを使うことでそれぞれを軸として回転をさせることが出来ます。rotate3Dを使うと、X軸、Y軸、Z軸の方向ベクトルを決めて、4つ目の引数で回転の角度を決めることが出来ます。このあたりは3Dに関する知識の芯の部分で、やや理解が難しいかもしれません。translateそれでは次にtranslateについてを見てみましょう。translateでは距離を指定して要素を移動させることが出来ます。こちらのコードをご覧ください。</div></body>実行結果このコードでは、transformのtranslateを使って、X軸(横)方向に50px、Y軸(縦)方向に100pxの移動をさせています。こちらもscaleのときと同じように、例えばX軸に50px、Y軸に50px移動させる場合は、引数を一つに省略することが出来ます。この他にもtranslateX、translateY、translateZを使うことでそれぞれの軸に対する移動距離を指定することが出来ます。translate3Dを使うと、X軸、Y軸、Z軸の移動方向を決めることが出来ます。skewそれでは最後にskewについて見ていきましょう。skewではそれぞれの角度について、どれくらい傾きをつけるかを指定することが出来ます。こちらのコードをご覧ください。</div></body>実行結果こちらのコードでは、transoformのskewを使って、X軸に30度、傾けました。skewでは、先程までの関数と同じように引数を一つに省略すると、指定した角度でX軸とY軸に傾けることが出来ます。この他にもskewX、skewYでそれぞれの軸ごとに角度をつけることが出来ます。まとめこの記事ではtransformの基本となるscale、rotate、translate、skewについてを解説してきました。transformはモダンなWebサイトではよく使われているプロパティになります。今回は文字について、これらの変形を適用させましたが、画像にも同じように適用させることが出来ます。皆さんも是非、サンプルコードを参考に使ってみてください!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。