Learning Perspective and Translation animations using Star Wars.

In this tutorial, we're going to learn how to make Perspective and Translation animations by creating our own Star Wars-style title scroll. First of all, perspective animations, as the name suggests are animations that alter an object in your webpage by changing it's appearance to simulate a change in perspective. Translation animations are animations that alter the position of an object, from one place to another, over a given time.

First, let us format our text.

Text Format

.text { margin: 1em; text-align: center; color: #FFFF00; transform-style: inherit; }

Next, we'll set up our perspective animation. To add a perspective animations, you need to add the perspective CSS property to the object you want to animate. Here, we will add it to our "container" object because we want to animate everything. We set our textbox 'transform-style' to "preserve-3d" to ensure that everything within that container transforms as well. We set the 'transform-style' of the text to "inherit" to make sure that it transforms in the same way.

Container Perspective

.container { perspective: 20px; background-color: #000000; } .textbox{ transform: rotateX(10deg); transform-style: preserve-3d; }

Next, we are going to animate the text as well. We will set the speed of our animation, as well, as the start and end points.

Text Translation

.text { animation: 30s moveDown linear infinite; } @keyframes moveDown { from { transform: translateY(80%); } to { transform: translateY(-10vh); } }

Since the goal is a Star Wars-Style text scroll, we will stop the tutorial here. But if you're interested in doing more with perspective, check out the Perspective with Animations playground.

HTML
CSS
Output