中矢 雄介

Yusuke Nakaya

 

株式会社オロ

マネージャー

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

 

クリエイティブコーダー

CSS振付師

Transforms 3D

と奥行きのある世界

Question

CSS 3D

3D 変形する property / value

扱ったことありますか？

手を挙げてくれた人へ

🤝

MENU

知識　基礎　応用

え？

もしかして WebGL いらない？

知識

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

  transform:

          rotateX(deg)

          rotateY(deg);

transform:

 translate3d(x, y, z);

   keyframes &                        animation

   hover &                                 transition

perspective: Npx;

transform-style:

           preserve-3d;

基礎

#駆け出しエンジニアはまず

立方体 の完成を目指せ

 

 

サイコロが想像しやすい

サイコロ

を構成する要素

1

2

3

4

5

6

6つのdiv を立体的に配置

サイコロのトリビア

向かい合わせ の値を          

          足すと７になる

 

詳しくは一天地六（いってんちろく）で検索

応用

作例

をどんどん紹介

Stack Overflow

のロゴ

松 本 城

あのドア

ローポリ

アクアリウム

アンブレラ

🎂

走る人

めちゃくちゃ

走る人

海賊王の船

テキスト

🍁秋🍁

自転車

ローポリ戦闘機

スターフォックス

まとめ

Transforms 3D

と奥行きのある世界

CSS 3D

で結構できちゃう

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

CSS 3D の 弱点

バリバリの3Dは

WebGL でどうぞ

ちょっとした

立体表現 から

試してみよう