HTML-CSS: Perspective transform on hover
HTML-CSS : Exercise-9 with Solution
Using HTML, CSS apply a perspective transform with a hover animation to an element.
- Use transform with the perspective() and rotateY() functions to create a perspective for the element.
- Use a transition to update the transform attribute's value on hover.
- Change the rotateY() value to negative to mirror the perspective effect from left to right.
HTML Code:
Explanation:
- The HTML code defines the structure of the webpage, including the document type declaration, metadata, title, and content.
- Comments are used to explain each line of HTML code, including the document type declaration, charset, viewport meta tag, title, and the structure of the preview section with image cards.
- The code consists of a preview section containing two image cards within a container.
- Each image card has a class specifying its perspective transform direction (left or right).
CSS Code:
Explanation:
- The CSS code defines the styling for the HTML elements.
- Comments are provided for each CSS rule to explain its purpose and effect on the elements.
- w3rcontainer class styles the container element.
- image-card class styles the image cards, including size, margin, padding, border radius, background image, and box shadow.
- perspective-left and perspective-right classes apply perspective transforms and rotations to the image cards.
- Transitions are added to create smooth animation effects on hover.
Go to:
PREV : Mouse cursor gradient tracking.
NEXT : Staggered animation.
HTML-CSS Editor:
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.