1 of 11

CSS 3d

Transforms

CSSで頑張る3D

2 of 11

Hello!

中矢 雄介 @s14garnet

株式会社オロ　フロントエンドエンジニア系

アニメーション　インタラクション　CSS振付師

クルマ　スノーボード　最近お腹まわりのpaddingを修正したい

3 of 11

3D

4 of 11

3d transforms

property

  • perspective
  • transform: rotateX() rotateY()
  • transform: translateZ()
  • transform-style: preserve-3d

etc...

5 of 11

3d transforms

property

  • perspective
  • transform: rotateX() rotateY()
  • transform: translateZ()
  • transform-style: preserve-3d

etc...

6 of 11

1.

Demo: preserve-3d

Codepen

https://codepen.io/YusukeNakaya/pen/bMQgbx

7 of 11

3D box

HTML

​

<div class=“box”>

<div class=“box_wall”></div>

<div class=“box_wall”></div>

<div class=“box_wall”></div>

<div class=“box_wall”></div>

<div class=“box_wall”></div>

<div class=“box_wall”></div>

</div>

.box {

Transform-style: preserve-3d;

}

.box_wall

8 of 11

2.

Demo: 3d box

Codepen

https://codepen.io/YusukeNakaya/pen/erQgrz

9 of 11

CONCEPT

CSS だけでどこまでできるのか？

Codepen で1年くらい作りまくった

Only CSS デモの一部を紹介します

10 of 11

Only CSS:

11 of 11

THANKS!

#please_follow {

twitter: ‘@s14garnet’;

codepen: ‘Yusuke Nakaya’;

}