In this article, we will learn how to zoom in on an image using the scale3d() function which is an inbuilt function in the transform property that has its aspects to resize the element in 3D space. It scales the element in the x, y, and z planes.
Syntax:
scale3d( x, y, z )
Parameters: Above function accepts three parameters which are described below.
- x: It positions the elements in the horizontal plane.
- y: It positions the elements in the vertical plane.
- z: It positions the elements in the z-component of the scaling vector.
Approach: We will introduce an image using the img tag and set the width and height of the image using HTML. Using CSS, we will center the image using flex properties, and give a better design. Using the scale3d() function we will set the coordinates x, y, and z of the image. So that while hovering over the image scale3d() function comes into an effect and resizes the image with the given coordinate values.
Example: Below is the implementation of the above approach.
<!DOCTYPE html> <html lang="en">
<head>
<title>scale3d()in CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
@import url(
'https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500&display=swap'); * {
box-sizing: border-box;
}
#containers {
display: flex;
justify-content: center;
align-items: center;
padding-top: 90px;
}
div img:hover {
transform: scale3d(1.1, 1.1, 1);
cursor: pointer;
transition: transform 1s;
}
img {
width: 225px;
height: auto;
}
</style>
</head>
<body>
<section id="img-container">
<div id="containers">
<img src=
width="225" height="225" alt="logo">
</div>
</section>
</body>
</html>
|
Output: