En este artículo, aprenderemos a acercar una imagen usando la función scale3d() , que es una función incorporada en la propiedad de transformación que tiene sus aspectos para cambiar el tamaño del elemento en el espacio 3D. Escala el elemento en los planos x, y y z.
Sintaxis:
scale3d( x, y, z )
Parámetros: La función anterior acepta tres parámetros que se describen a continuación.
- x: Posiciona los elementos en el plano horizontal.
- y: Posiciona los elementos en el plano vertical.
- z: Posiciona los elementos en la componente z del vector de escala.
Enfoque: Introduciremos una imagen usando la etiqueta img y estableceremos el ancho y alto de la imagen usando HTML . Usando CSS, centraremos la imagen usando propiedades flexibles y daremos un mejor diseño. Usando la función scale3d() estableceremos las coordenadas x, y, y z de la imagen. De modo que, al pasar el cursor sobre la imagen , la función scale3d() entra en efecto y cambia el tamaño de la imagen con los valores de coordenadas dados.
Ejemplo: A continuación se muestra la implementación del enfoque anterior.
HTML
<!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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220328131201/download3.png"
width="225" height="225" alt="logo">
</div>
</section>
</body>
</html>
Producción:
