【神技術】WebGL不使用、ピュアCSS3Dで動くスーパーマリオ
投稿日時: 2026/07/22 00:00
■ 概要・編集部サマリー
1. 【背景・WebGL非使用のピュアCSS 3Dマリオデモ】Three.js を使わないグラフィック表現が発表され大反響を呼んでいます。 2. 【焦点・transform-style: preserve-3d による立体描画】数百個の HTML div 要素を CSS 3D 空間で精密回転・配置させる構造を提示しています。 3. 【評価・CSS表現の極限挑戦とエンジニアの情熱】ブラウザの 3D パイプラインを駆使した技術的ロマンに対し、世界中のフロントエンド開発者から絶賛が集まりました。
■ JavaScript 3D ライブラリを一切使わない CSS レンダリング
WebGL シェーダーや Canvas 描画エンジンを一切排し、標準の HTML `
キー入力に応じてリアルタイムに画面内で回転・ジャンプ動作する驚異の技術が示されました。
■ transform-style: preserve-3d と 3D 空間パイプライン
`perspective` による奥行き設定と `transform-style: preserve-3d` によるネスト要素の立体空間保持プロパティを限界まで駆使したコード構造を整理しました。
Chrome DevTools の 3D レイヤービューワーで確認できる数百の DOM ボックスによる立体マッピング構造が高く評価されています。
■ ライブラリ非依存のクリエイティブハックと Web のロマン
「あえて WebGL を使わず CSS の限界に挑む」という作者の無駄とも言える深い情熱に対し、全世界のフロントエンドエンジニアから絶賛の声が寄せられています。
実用性の枠を超えて Web 標準技術の潜在的表現力を証明した金字塔として賞賛されています。
海外掲示板の反応・まとめ
■ Reddit r/webdevの作品紹介。WebGL非使用のピュアCSS 3Dスーパーマリオとpreserve-3d技法が語られています。
Redditで見つけた『WebGLを一切使わずに、純粋なCSS 3D transformだけで作ったスーパーマリオ』のデモ狂気すぎて笑ったw DIV要素を立体配置してマリオが3D空間動いてるぞ！
>>2 ソースコード見たけど `transform-style: preserve-3d` と `rotateX()` `rotateY()` を極限まで駆使して、CSSだけでポリゴン描くみたいなことやってて頭おかしいレベルの技術力だわ。
>>3 普通なら Three.js や WebGL 使うところを、意地でもピュアCSSとHTMLだけで再現するっていう無駄な情熱がウェブのロマン詰まってて最高すぎる。
>>4 ChromeのDevToolsの3Dビューアで開くと、立体的に配置された数百個のDIV要素の箱が組み合わさってマリオの形になってるの見て感動したわ。
実用性はともかく、CSSという言語の秘められた可能性を限界まで引き出した神作品だな。
これだからWeb開発の世界は面白くてやめられんわ。
r/webdev コミュニティ『3D CSS Super Mario (No WebGL)』検証。
`transform-style: preserve-3d` と `perspective` プロパティの限界活用。
HTML `
海外のコミュニティでも『CSSの変態がまた現れた』って海外のフロントエンドエンジニア達が大爆笑してるぞ。
Chrome DevTools 3D Layer View での DOM ボックスレイアウト可視化。
WebGL / Canvas レンダリングエンジンと CSS 3D パイプラインの比較。
Web 標準技術（Pure CSS）に対するクリエイティブハック情熱。
フロントエンドのロマン。ライブラリに頼らずCSSの潜在能力を解き放つクリエイター精神を見習いたいな。