CSS Animation

Question 1

How do you tell a browser that a page or part of a page is a 3D scene?

Answer 1

transform-style: preserve-3d

Question 2

How do you you set depth in a 3D scene?

Answer 2

With the perspective property.

Give the property a size in px, em, rem etc.

Question 3

Is a transform a form of animation?

Answer 3

No. A transform is not a form of animation, it is a way of setting an element’s position.

Question 4

What is a “hero image”?

Answer 4

A large, attention-grabbing image at the top of a hompage.

Question 5

What property allows an animation to be paused on hover, for example?

Answer 5

animation-play-state

.screen:hover {

animation-play-state: paused;

}

Question 6

The transform property is used by setting what of an element?

Answer 6

Setting a static position, skew or scale of an element.

Question 7

Is a different transform required for each keyframe or state?

Answer 7

Yes

Question 8

What must you set before using 3d transforms in CSS?

Answer 8

You must set a stage for the 3D using the perspective and transform-style properties.

In HTML terms, this means we create a container and tell the browser that some 3D stuff is going to happen.