JavaScript

After the sides are turned, we only see the front of the cube. Well, the back, thanks to the transparency of the background. To make all the sides visible, we need to add a perspective with a depth of 400px....

Let’s rotate our cube a little so that the inscriptions do not merge. The cube will be rotated around the X axis by -5 degrees. Do not forget that all other elements that we have transformed must remain in their 3D space....

Let’s write a script and transformations that will open the window. When clicking on the button of an element with the class .blind, you need to add the class .opened....

Hovering over any item in the Netflix shows list should cause transition: the value of the margin-left property should become -300px; the value of the font-size property should be 32px....

Let’s practice transitions of css property values. For div.box element, the following changes should occur on hover: width should be 400px, transition delay 1s, duration - 4s; height should be 400px, transition delay is 2s, duration - 4s; the corners should become 50% rounded, transition delay 2s, duration - 4s; background color should be #861657, transition delay should not be, duration should be 4s....

Let’s add a simple animation. In it, the circle should move infinitely along the corners of the square. Let’s do a little preparation before the animation. One animation cycle of a div....

Now let’s describe our circleMove animation in a keyframe. The starting position has already been specified. After a quarter of the time, the circle should move to the upper right corner....

Let’s animate the flipping of the card We’ll do some preparation at the first step. Firstly, the back of the map (.face.back) must be rotated 180 degrees around the Y axis...

We will turn the card over with trickery. If we just turn it over, it will sort of pop out a little ahead. To avoid this, we need to shift the center of the perspective to the right of the card element....

You’ve probably watched the Star Wars movies. Now I will try to create this animation for the first episode. First of all, let’s prepare the markup for our page. Inside the body, add a div with class star-wars, inside it, add a div with class episode-intro....