めぐろ LT 会 #16

 

 

 

 

中矢 雄介

CSSの深淵を覗く

Over Engineering

中矢 雄介

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 でどうぞ

Thanks!

@s14garnet

Yusuke Nakaya

CodePen CSS 作品       点公開中

280

Meguro.css 次回 8月開催

Made with Slides.com