如何使用 CSS 中的 scale3d()函数放大图像？

在本文中，我们将学习如何使用 scale3d()函数放大图像，该函数是transform属性中的一个内置函数，具有在 3D 空间中调整元素大小的方面。它在 x、y 和 z 平面中缩放元素。

句法：

scale3d( x, y, z )

参数：上述函数接受三个参数，如下所述。

• x：它将元素定位在水平面上。
• y：它将元素定位在垂直平面中。
• z：它将元素定位在缩放向量的 z 分量中。

方法：我们将使用img标签引入图像，并使用HTML设置图像的宽度和高度。使用 CSS，我们将使用 flex 属性使图像居中，并提供更好的设计。使用scale3d() 函数我们将设置图像的坐标 x、y 和 z。这样当鼠标悬停在图像上时 scale3d()函数就会生效，并使用给定的坐标值调整图像的大小。

示例：下面是上述方法的实现。

HTML

输出：