Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Challenge: Combine Translation and Skewing | Transforming Elements with CSS
Advanced CSS Techniques

bookChallenge: Combine Translation and Skewing

Task

Create an interactive information card about animals. Follow these steps to add dynamic effects on hover:

  1. Apply a perspective of 400px to the parent element, a div with the class name container.
  2. Utilize the translateZ() function to bring the card (div with the class name card) closer to the user by 50px.
  3. Introduce a skew along the x-axis by 10deg to the card description (div with the class name card-description-wrapper).
index.html

index.html

index.css

index.css

copy
  1. For the parent container (div with the class name container), set the perspective property to 400px to create a 3D space for the card transformations.
  2. To bring the card (div with the class name card) closer to the user, use the translateZ() function with a value of 50px. This will simulate the card moving forward in the 3D space.
  3. Apply a skew effect along the x-axis to the card description (div with the class name card-description-wrapper) using the transform property with the skewX() function and a value of 10deg.
index.html

index.html

index.css

index.css

copy

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 8

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 2.04

bookChallenge: Combine Translation and Skewing

Scorri per mostrare il menu

Task

Create an interactive information card about animals. Follow these steps to add dynamic effects on hover:

  1. Apply a perspective of 400px to the parent element, a div with the class name container.
  2. Utilize the translateZ() function to bring the card (div with the class name card) closer to the user by 50px.
  3. Introduce a skew along the x-axis by 10deg to the card description (div with the class name card-description-wrapper).
index.html

index.html

index.css

index.css

copy
  1. For the parent container (div with the class name container), set the perspective property to 400px to create a 3D space for the card transformations.
  2. To bring the card (div with the class name card) closer to the user, use the translateZ() function with a value of 50px. This will simulate the card moving forward in the 3D space.
  3. Apply a skew effect along the x-axis to the card description (div with the class name card-description-wrapper) using the transform property with the skewX() function and a value of 10deg.
index.html

index.html

index.css

index.css

copy

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 8
some-alt