たったの3行でエイプリルフール感を出すCSS

左右反転のCSS

過去に Yahoo! あたりもエイプリルフールネタでこんなことをしていた気がしますが、CSS でやればたったの3行で済んでしまいます。

CSS

body {
  transform: scaleX(-1);
}

transform の scaleX は X 軸の縮尺を決めるもので通常は1、-1にすることで反転させることが出来ます。

今は X 軸のみ変えていますが、scaleY を使って Y 軸の縮尺をいじれば上下反転も可能です。

上下反転のCSS

body {
  transform: scaleY(-1);
}

scale 値を使えば X 軸 Y軸セットで反転も可能です。

上下左右反転のCSS

body {
  transform: scale(-1, -1);
}

最近は transform にベンダープレフィクスはいらないですが気になる方は調べて付けてください。

読みづらいので戻す

戻したほうが読みやすいですね。

まとめ

body を反転させるのは色々問題がある気がしますが、画像など一部要素を反転させるのにも scale は使えるので応用範囲は意外と広いです。

今日ぐらいしか使えませんが使ってみても良いかもしれないです。