This document introduces CSS 3D transforms for beginners. It discusses how 3D graphics were previously done with Flash, canvas, and WebGL, but can now also be done with CSS 3D transforms using only three properties: transform, perspective, and transform-style. The document provides examples of how to use these properties to create a card flip animation, explaining how to structure the HTML and apply the appropriate CSS rules.

1. CSS 3D transforms
for beginners 🎉
Ayaka Sasaki 2019/1/30
自己紹介

2. 3D graphics on the web
自己紹介
good ol’ days of Flash
<canvas> and WebGL - Three.js
WebVR and AR

3. 自己紹介
but we also have CSS 3D transforms!
3D graphics on the web

4. But why would I
want to learn 3D
transforms ?
who cares bleh… i have work to do
(↑me some>me ago)
自己紹介

5. 😏
Look at these
自己紹介

6. Want to create a
CSS-only city? 🏢
自己紹介

7. 自己紹介

8. Want to create cool hover
effects? 😎
自己紹介

9. 自己紹介

10. 自己紹介

11. Want to create a buzzing
animation of a mac? 💻
自己紹介

12. 自己紹介

13. or just a touch of coolness to
your website? 📰
自己紹介

14. 自己紹介

15. But that looks a bit difficult… 🤔自己紹介

16. But really…
you only need to know
3 properties
自己紹介

17. transform
自己紹介
lets you rotate, scale, or translate an element
determines the distance between the z=0 plane and the user
in order to give a 3D-positioned element some perspective
perspective
sets whether children of an element are positioned in the
3D space or are flattened in the plane of the element
transform-style

18. transform
自己紹介
- rotate, scale, or translate
transform:translateX(20px) translateY(20px) rotate(40deg);
- don’t write multiple transforms
transform:translateX(20px);
transform:translateY(20px);
transform:rotate(40deg);
×
○
- order matters
transform:rotate(90deg) translateZ(-100px);
transform:translateZ(-100px) rotate(90deg);
- multiple transforms are additions not overrides
transform:translateX(100px) translateX(100px); translateX(200px);=

19. perspective
自己紹介
- how far you are from the elements
- can either use:
transform: perspective(<length>);
perspective: <length>;
or
on parent element
on child element
perspective: 400px; transform: perspective(400px);

20. 自己紹介

21. perspective
自己紹介
- how far you are from the elements
- can either use:
transform: perspective(<length>);
perspective: <length>;
or
on parent element
on child element
perspective: 400px; transform: perspective(400px);

22. perspective-origin
自己紹介
- where you want to position yourself from the elements

23. 自己紹介

24. transform-style
自己紹介
- sets whether children of an element are positioned in 3D space or flat space
- values are:
transform-style: preserve-3d;
transform-style: flat;
- just use 👍transform-style: preserve-3d;

25. Okay… but how do i actually use
them…
自己紹介

26. 自己紹介
Example: card flip!

27. Markup
自己紹介<div class="scene">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
what are you doing there 😒

28. Markup
自己紹介
to start of a 3D project, make sure to create a
“scene” that provides
.scene {
width: 200px;
height: 260px;
perspective: 600px;
}

29. Markup
自己紹介
<div class="scene">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
.card {
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
Use transform-style on the most outer element of
your 3D element

30. Markup
自己紹介
<div class="scene">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
.card__face {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.card__face--back {
transform: rotateY( 180deg );
}

31. Flip it!
自己紹介
.scene:hover .card {
transform: rotateY(180deg);
}

32. Ayaka Sasaki
Product Designer / Developer at Eishis Inc.
github.com/ayausaspirit
twitter.com/bagelee
codepen.io/ayausaspirit
自己紹介
Thank you!