From the course: CSS: Animation
Join today to access over 25,500 courses taught by industry experts.
Animating 3D transforms - CSS Tutorial
From the course: CSS: Animation
Animating 3D transforms
- [Instructor] Let's look at how we can use 3D Transforms in our CSS key frame animations. We'll create a short text effect like the one you see here. By animating 3D Transforms on each letter and using animation delay to create an offset to have that wave like motion across our full text. We'll be rotating each letter around the X axis, which is the axis that runs horizontal across the browser window. In our HTML, we have each letter wrapped in its own span so we can target them individually. There are helpful JavaScript libraries like Splitting JS and others that will do this wrapping of each letter in a span automatically for you at runtime. But for the purposes of this example, adding them manually works just fine. So let's move to our CSS to start creating our animation. Since I already know I'll be using 3D Transforms. I'm going to start by setting two properties on the parent H2 element to ensure that all of our…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
Contents
-
-
-
-
-
Infinitely looping animations3m 58s
-
(Locked)
Pause and play with animation-play-state3m 16s
-
(Locked)
Animating 3D transforms5m 24s
-
(Locked)
Chaining multiple keyframe animations4m 48s
-
(Locked)
Challenge: Adding a third animation to the chain33s
-
(Locked)
Solution: Adding a third animation to the chain2m 16s
-
-
-
-
-