CSS | Propiedad de origen de transformación

La propiedad transform-origin de CSS se utiliza para especificar el origen de rotación de un elemento. Es el punto sobre el cual se gira un elemento. Se puede utilizar tanto para rotaciones 2D como 3D.

Sintaxis:

transform-origin: position | initial | inherit

Valores de propiedad:

posición: Esto especifica la posición del origen de la rotación. Toma 3 valores correspondientes a la distancia desde el borde izquierdo de la caja, la distancia desde el borde superior de la caja y el eje z de rotación.

Los valores se pueden especificar en unidades de longitud, porcentajes o palabras clave. El valor del eje z siempre se especifica utilizando unidades de longitud.

Ejemplo 1: Especificación de la posición en unidades de longitud

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .outer {
            margin: 50px;
            border: 1px dotted;
            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;
            transform: rotate(15deg);
            transform-origin: 10px 30px;
        }
    </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:
valores

Ejemplo 2: Especificación de la posición en porcentaje

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .outer {
            margin: 50px;
            border: 1px dotted;
            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;
            transform: rotate(15deg);
            transform-origin: 50% 75%;
        }
    </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:
porcentaje

Ejemplo 3: Especificación de la posición en palabras clave

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .outer {
            margin: 50px;
            border: 1px dotted;
            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;
            transform: rotate(15deg);
            transform-origin: bottom left;
        }
    </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:
valor-palabra clave

initial: Esto se usa para establecer la propiedad en su valor predeterminado.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <style>
        .outer {
            margin: 50px;
            border: 1px dotted;
            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;
            transform: rotate(15deg);
            transform-origin: initial;
        }
    </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:
inicial

heredar: Esto se usa para heredar la propiedad de su padre.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <style>
        /* this acts as the parent */
          
        .outer {
            margin: 50px;
            border: 1px dotted;
            position: relative;
            height: 100px;
            width: 400px;
            background-color: lightgreen;
            /* set the property of the parent */
            transform-origin: bottom left;
        }
          
        .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;
            transform: rotate(15deg);
            /* inherits the property of the parent */
            transform-origin: inherit;
        }
    </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:
heredar

Navegadores compatibles: los navegadores compatibles con la propiedad transform-origin se enumeran a continuación:

cromo 35.0
Internet Explorer 10.0
Firefox 16.0
Safari 9.0
Ópera 23.0

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta