Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Adding Translating and Skewing | Transformations
Advanced CSS Techniques
course content

Conteúdo do Curso

Advanced CSS Techniques

Advanced CSS Techniques

1. Introduction
2. Item Positioning
3. Transitions
4. Animations
5. Transformations
6. Adaptive/responsive websites and apps
7. Preprocessors

bookChallenge: Adding Translating 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).
html

index

css

index

js

index

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.
html

index

css

index

js

index

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

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