Conteúdo do Curso
Advanced CSS Techniques
Advanced CSS Techniques
Challenge: Adding Translating and Skewing
Task
Create an interactive information card about animals. Follow these steps to add dynamic effects on hover:
- Apply a
perspective
of400px
to the parent element, adiv
with the class namecontainer
. - Utilize the
translateZ()
function to bring the card (div
with the class namecard
) closer to the user by50px
. - Introduce a skew along the x-axis by
10deg
to the card description (div
with the class namecard-description-wrapper
).
index
index
index
- For the parent container (div with the class name
container
), set theperspective
property to400px
to create a 3D space for the card transformations. - To bring the card (
div
with the class namecard
) closer to the user, use thetranslateZ()
function with a value of50px
. This will simulate the card moving forward in the 3D space. - Apply a skew effect along the x-axis to the card description (
div
with the class namecard-description-wrapper
) using thetransform
property with theskewX()
function and a value of10deg
.
index
index
index
Obrigado pelo seu feedback!