La propiedad transform en CSS se usa para transformar la imagen de fondo. En este artículo, la tarea es transformar la imagen de fondo.
Enfoque: la propiedad de transformación CSS se utiliza para aplicar la transformación bidimensional o tridimensional a un elemento. La propiedad transform se usa para rotar, escalar y sesgar un elemento.
Sintaxis:
.class_name { transform: value };
Nota: agregue el desbordamiento: oculto al componente principal con la propiedad de transformación para evitar el efecto de superposición.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div.parent{
margin-top: 15%;
margin-left: 10%;
}
.child{
/* transform image 50 degree */
transform: rotate(50deg);
}
</style>
</head>
<body>
<div class="parent">
<div>
<img src="gfg_complete_logo_2x-min.png"
class="child">
</div>
</div>
</body>
</html>
Producción:
-
Antes de transformar la imagen de fondo:
-
Después de transformar la imagen de fondo:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA