En este artículo, aprenderemos cómo establecer la ubicación base de un elemento girado en CSS. Esto se puede usar para rotar un elemento desde un cierto punto como origen.
Enfoque: Usaremos la propiedad transform-origin para establecer la ubicación base de un elemento giratorio. Esta propiedad se puede utilizar para especificar el origen de la rotación de un elemento. Es el punto sobre el cual se gira un elemento. Se puede usar tanto para rotaciones 2D como 3D, pero en este artículo usaremos rotaciones 2D.
Sintaxis:
transform-origin: position
Ejemplo 1: En este ejemplo, especificamos la posición en unidades de longitud.
HTML
<html>
<head>
<style>
.outer {
margin: 50px;
border: 1px double;
/* This makes outer div relative so that
inner div on move according to user input */
position: relative;
height: 100px;
width: 400px;
background-color: lightgreen;
}
.box {
position: absolute;
border: 1px solid;
background: url(
"https://contribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png")
no-repeat;
background-size: cover;
height: 100px;
width: 400px;
/* Rotate image by 15 degrees */
transform: rotate(15deg);
/* Transforms image from initial position
to 15px left and 40px from top */
transform-origin: 15px 40px;
}
</style>
</head>
<body>
<h1>CSS transform-origin Property</h1>
<p>
The CSS transform-origin Property is used to set
the origin of the element's transformation
</p>
<div class="outer">
<div class="box"></div>
</div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, especificamos la posición en porcentaje.
HTML
<html>
<head>
<style>
.outer {
position: relative;
height: 100px;
width: 250px;
margin: 50px;
padding: 5px;
border: 2px solid lightgreen;
}
.box {
padding: 18px;
position: absolute;
border: 1px solid lightgreen;
background-color: green;
/* Rotate image by 30 degrees */
transform: rotate(30deg);
/* Transforms image from initial
position to 30% from the left and
40% from the top */
transform-origin: 30% 40%;
}
</style>
</head>
<body>
<h1>CSS transform-origin Property</h1>
<p>
The CSS transform-origin Property
is used to set the origin of the
element's transformation
</p>
<div class="outer">
<div class="box">
Welcome to GeeksforGeeks
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA