![]() With that covered, we’ll introduce the tagline. Smaller values create more “extreme” perspective effects as the scene is shorter. Secondly, the persective property tells the browser how “deep” the scene needs to be. CSS Tricks goes into more detail on the property. These two properties tell the browser that the container’s children should be positioned in 3D, rather than flat. Do feel free to grab them to use if you want to play along. In preparation for this example I made two SVG files for the Star and Wars parts of the logo. Rotating around the Y-axis will require a bit of 3D work in the browser. Lastly we’ll use rotateY to spin the letters of the tagline. In this case we’ll be using a combination of scale and translateZ to make it look like some words are flying through space. This axis would be the one represented by drawing a line from you, through the monitor. Using translateZ we can move elements in the Z-axis. ![]() We can make elements larger or smaller using scale. ![]() Transform: scale(), translateZ() and rotateY() We can use it to create great effects but to do so we need to have a different transform for each keyframe or state we animate. While it may sound like it creates an animation, the transform property is in fact used setting a static position, skew or scale of an element. This example combines CSS animation with some other CSS properties you may find helpful, specifically the transforms scale, translate and rotate. For a limited time you can pay what you want. ![]() This is an excerpt from the course, CSS Animation 101. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |