Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Using Perspective for Depth Effects | Transforming Elements with CSS
Advanced CSS Techniques

bookUsing Perspective for Depth Effects

All elements are rendered flat on the web page. However, we can add some depth. perspective adds an effect of 3d elements. The syntax is following:

perspective: value in px;

We apply perspective to the parent of an element that has some transformation. So, the element becomes like a scene for the transformed element. To visualize the concept, let's pay attention to the following animation. The blue border is the parent element with some perspective, and the element inside has some rotation.

Let's have some practice and add perspective. Our task is to add perspective to the parent elements (div element with the class name box-border) that have children with some transformation.

index.html

index.html

index.css

index.css

copy

Note

The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

question mark

What element must the perspective property be applied to?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 7

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.04

bookUsing Perspective for Depth Effects

Pyyhkäise näyttääksesi valikon

All elements are rendered flat on the web page. However, we can add some depth. perspective adds an effect of 3d elements. The syntax is following:

perspective: value in px;

We apply perspective to the parent of an element that has some transformation. So, the element becomes like a scene for the transformed element. To visualize the concept, let's pay attention to the following animation. The blue border is the parent element with some perspective, and the element inside has some rotation.

Let's have some practice and add perspective. Our task is to add perspective to the parent elements (div element with the class name box-border) that have children with some transformation.

index.html

index.html

index.css

index.css

copy

Note

The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

question mark

What element must the perspective property be applied to?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 7
some-alt