Create a Flipping Animation with 3D Transform Properties10:09 with Guil Hernandez
Let's use CSS transitions and 3D transforms to make the photo gallery look 3D! In this video, you're going to create a 3D flip animation. You'll also learn a new property that gives you control over the behavior of nested elements in 3D space.
- Using CSS 3D transforms
- transform-style – MDN
- transform-style – WebKit demo
- backface-visibility – MDN
- cubic-bezier – WPD
- The 3D space you set applies to the direct children only.
- Other deeply nested elements will not live in the same 3D space, so they'll behave like 2D elements.
- For nested elements to behave like elements in 3D space, pass the 3D space down to them, using
transform-style: preserve-3d;indicates that the children of the element should be positioned in the 3D space.
- By default, the backside of an element is visible when facing the viewer.
- When elements are in 3D space, you can use
backface-visibilityto control whether or not you see an element's backside.
backface-visibility: hidden;hides the backside of a 3D-transformed element.
You need to sign up for Treehouse in order to download course files.Sign up