CSS Transformの仕様は意外にも複雑です。思った通りの場所に表示できず、その場凌ぎにmarginやpaddingの目分量で位置合わせをしてしまった……。そんな経験をもつ方もいるのではないでしょうか? この記事では、CSS Transformの基礎をおさらいした上で、陥りやすいミスの回避方法や最新の機能を紹介します。 CSS Transformとは? CSS Transformはwebページで高度な表示やアニメーションを高速に描画するための仕様として生まれました。 往年のwebユーザーの方であれば、Google検索のイースターエッグのひとつ『do a barrel roll』をご存知かもしれません。このイースターエッグは当時(2010年代初頭)最先端であったCSS Transformをデモする意味もありました。 2021年現在では、発展系の3D変形も含め、ほぼすべての機能がIE(I
![もう誤魔化さない! CSS Transform完全入門(2D編) - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/b90dc4b994244f1019a7a8799488425a2e761dcd/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F210311%2Fimages%2Feyecatch.png)