中矢 雄介

Yusuke Nakaya

株式会社オロ

フロントエンドエンジニア

クリエイティブコーダー

CSS アニメーション研究（2017〜2022）

CodePen にて CSS 作品 280 点公開中

CSS 系 LT 会「Meguro.css」主催

この彗星アニメーション

実は CSS だけで動いています

Question

CSS 3D

3D 変形する property / value

扱ったことありますか？

手を挙げてくれた人へ

🤝

知識

1. transform: rotateX(deg) rotateY(deg);
2. transform: translate3d(x, y, z);

  transform:

          rotateX(deg)

          rotateY(deg);

transform:

 translate3d(x, y, z);

基礎

立方体 を作る場合

サイコロが想像しやすい

サイコロ

を構成する要素

1

2

3

4

5

6

6つのdiv を立体的に配置

応用

すぎ

やり

作例

をどんどん紹介

まつ

ろ

Stack Overflow

のロゴ

松 本 城

あのドア

ローポリ

アクアリウム

アンブレラ

🎂

走る人

めちゃくちゃ

走る人

海賊王の船

テキスト

🍁秋🍁

自転車

ローポリ戦闘機

スターフォックス

供養🙏

まとめ

CSSの深淵を覗く

Over Engineering

CSS 3D

やりすぎちゃった

• 気軽に立体化できない
• 曲面や球面は難しい
• パフォーマンスがツラい

CSS 3D の 弱点

バリバリの3Dは

WebGL でどうぞ