Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda 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

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 8

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

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

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 8
some-alt