CSSで体験する錯視の世界

錯視とは視覚系で発生する錯覚の一種であり、実際には存在しないものが見えたり実際とは異なるものが見えたりする現象のことを指します。錯視の発生するパターンについて多種多様なものが知られていますが、CSSを利用して様々な錯視を実体験できるサイトが「CSS Optical Illusions」です。

CSS Optical Illusions
https://alvaromontoro.com/blog/68091/css-optical-illusions

◆ポッゲンドルフ錯視
ポッゲンドルフ錯視とは長方形などの物体に斜め線の一部が隠されている際に分断された線分がずれて見えるという、幾何学的錯視の一種です。以下の埋め込みCodePenでマウスカーソルをホバー(スマートフォンの場合はタップ)すると隠されていた車線の一部が表示され、ポッゲンドルフ錯視を体験できます。なおこのデモは斜め線と縦棒をCSSの::before疑似要素と::after疑似要素だけで実装していることが「CSS」ボタンをクリックするとわかります。

See the Pen CSS Optical Illusion: Poggendorff Illusion (I) by Alvaro Montoro (@alvaromontoro) on CodePen.

複数の斜め線・縦棒を使ったより複雑な図形でも同じ効果を見ることができます。こちらのデモはbodyのみで実装しており、body中に2つのグラデーションを定義し70度の角度で交差させています。

See the Pen CSS Optical Illusion: Poggendorff Illusion (II) by Alvaro Montoro (@alvaromontoro) on CodePen.

◆誘導グラデーション
誘導グラデーションでは、3本のバー(両側の縦棒2本と中央の横棒1本)はすべて同じグレーなのに、背景のグラデーションにより異なる色に見えるという錯視を体験できます。特に中央の横棒は淡色であるにもかかわらずグラデーションに見えます。CSSを確認するとバーはすべて同じ単色であることがわかります。

See the Pen CSS Optical Illusion: Gray Bars by Alvaro Montoro (@alvaromontoro) on CodePen.

より複雑な以下のデモでは中央の横棒はグラデーションに見えますが、マウスをホバーすると背景を覆い隠して実は単色だったことが理解できます。

See the Pen CSS Optical Illusion: Induced Gradient by Alvaro Montoro (@alvaromontoro) on CodePen.

◆色づいた球体
以下のデモでは赤・青・緑の球体があるように見えますが実はすべて同じグレーというものです。マウスをホバーすると背景が消え、本当にグレーだったことが確認できます。この錯視はホワイト錯視やムンカー錯視と呼ばれるものに相当します。

See the Pen CSS Optical Illusion: Gray Color Circles by Alvaro Montoro (@alvaromontoro) on CodePen.

◆曲がり盲
以下のデモには横方向の波線が表示されていますが、上の波線は比較的真っすぐな線で構成されているように見え、下の波線は非常に曲がった線で構成されているように見えます。しかし、実際には両方とも同じ曲率の波線であり、マウスをホバーするとそのことが確認できます。この錯視は(PDFファイル)曲がり盲と呼ばれるものです。波線に関するCSSの実装についてはWavy shape generatorを利用したとのこと。

See the Pen CSS Optical Illusion: Curvature Blindness by Alvaro Montoro (@alvaromontoro) on CodePen.

◆カフェウォール錯視
カフェウォール錯視は錯視の中でも古典的な部類に属するもので、タイル状の模様の境界線が傾いて見えるというものです。以下のデモではマウスをホバーするとタイルの境界線が実は水平であることが確認できます。複雑なデモに見えるものの実装に使用されているCSSの基本要素は3つのグラデーションのみです。

See the Pen CSS Optical Illusion: Café Wall by Alvaro Montoro (@alvaromontoro) on CodePen.

◆ポンゾ錯視
ポンゾ錯視は奥行きや遠近感を感じる背景を利用した錯視で同じ大きさの図形であるにもかかわらず異なる大きさに見えるというものです。以下のデモでは上下に並んだ2つの黄色い線分は同じ長さですが上の線分の方が長く見えます。マウスをホバーすると2つの線分が同じ長さであることを確認できます。デモの作成にあたりCSSでrotate3d()関数を使った3次元回転を適用しており、リアルな遠近法を技術的に実現しています。

See the Pen CSS Optical Illusion: Ponzo Illusion by Alvaro Montoro (@alvaromontoro) on CodePen.

◆垂直水平錯視
垂直水平錯視は同じ長さの垂直線と水平線が異なる長さに見えるというものです。以下のデモではT字型の図形の垂直線と水平線は同じ長さですが垂直線の方が長く見えます。ホバー時のアニメーションがないということもあり、CSSの実装はとても簡単な作りとなっています。

See the Pen CSS Optical Illusion: Ponzo Illusion by Alvaro Montoro (@alvaromontoro) on CodePen.

◆ミュラーリヤー錯視
錯視の代表格ともいえるミュラーリヤー錯視は同じ長さの線分が異なる長さに見えるというものです。マウスをホバーすると錯視を引き起こす線分から伸びる余分な線が消失し、2本の線分が同じ長さであることが確認できます。CSSコーディングについて言及するといずれの図形も疑似要素で構成されており、::beforeと::afterを利用して矢印状のエッジの向きを変更しています。

See the Pen CSS Optical Illusions: Müller-Lyer illusion by Alvaro Montoro (@alvaromontoro) on CodePen.

◆カラーファン
以下のデモはCSSアニメーションによって緑と赤のファンが回転しています。中央の黒い点を見つめていると緑の円の縁が濃い緑や茶色に見えることがありますが、黒い点から視点を外して緑の円を見てみると均一な色であることがわかります。

See the Pen CSS Optical Illusion: Color Fan by Alvaro Montoro (@alvaromontoro) on CodePen.

◆呼吸する四角形
以下のデモは呼吸する四角形と呼ばれる錯視をCSSアニメーションで表現したものです。4つの緑色の四角形の裏で回転している中央の青い四角形を見ていると、拡大縮小を繰り返しているように見えます。マウスをホバーすると4つの緑色の四角形が移動し、中央の青い四角形はただ単に回転しているだけであることが確認できます。

See the Pen CSS Optical Illusion: Breathing square by Alvaro Montoro (@alvaromontoro) on CodePen.

「CSS Optical Illusions」では上記以外にも様々な錯視をCSSで表現したデモが公開されているので、錯視やCSSに興味のある人は是非アクセスしてみてください。