HTML-CSS: Perspective transform on hover

Last update on March 07 2024 13:21:46 (UTC/GMT +8 hours)

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:

<!--License: https://bit.ly/3GjrtVF--><!-- License information -->
<!DOCTYPE html><!-- Document type declaration -->
<html><!-- Opening html tag -->
<head><!-- Opening head tag -->
<meta charset="utf-8"><!-- Character encoding -->
<meta name="viewport" content="width=device-width"><!-- Viewport meta tag -->
<title>Using HTML, CSS apply a perspective transform with a hover animation to an element</title><!-- Title of the webpage -->
</head><!-- Closing head tag -->
<body><!-- Opening body tag -->
<strong>Preview:</strong><br><!-- Preview heading -->
<div class="card-container"><!-- Container for image cards -->
<div class="image-card perspective-left"></div><!-- Image card with perspective transform to the left -->
<div class="image-card perspective-right"></div><!-- Image card with perspective transform to the right -->
</div><!-- Closing card-container div -->
</body><!-- Closing body tag -->
</html><!-- Closing html tag -->

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:

<style>
/* Opening style tag for CSS */

.w3rcontainer{
   border: 1px solid #cccfdb; /* Border style for w3rcontainer */
   border-radius: 2px; /* Border radius for w3rcontainer */
}

.image-card {
  display: inline-block; /* Displaying image-card as inline-block */
  box-sizing: border-box; /* Including padding and border in element's total width and height */
  margin: 1rem; /* Margin around the image-card */
  width: 240px; /* Width of the image-card */
  height: 320px; /* Height of the image-card */
  padding: 8px; /* Padding inside the image-card */
  border-radius: 1rem; /* Border radius for the image-card */
  background: url("https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-2.jpeg"); /* Background image for the image-card */
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; /* Box shadow for the image-card */
}

.perspective-left {
  transform: perspective(1500px) rotateY(15deg); /* Applying perspective and rotation to the left for perspective-left */
  transition: transform 1s ease 0s; /* Transition effect for perspective-left */
}

.perspective-left:hover {
  transform: perspective(3000px) rotateY(5deg); /* Changing perspective and rotation on hover for perspective-left */
}

.perspective-right {
  transform: perspective(1500px) rotateY(-15deg); /* Applying perspective and rotation to the right for perspective-right */
  transition: transform 1s ease 0s; /* Transition effect for perspective-right */
}

.perspective-right:hover {
  transform: perspective(3000px) rotateY(-5deg); /* Changing perspective and rotation on hover for perspective-right */
}

</style>
/* Closing style tag */

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.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.