Girar() | Consejos CSS

CSS rotate() La función rota elementos en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj en el plano 2D. Es una de las muchas funciones de transformación utilizadas en aplicaciones. transform propiedad.

Por ejemplo, utilice rotate() Podemos hacer girar la aguja las 24 horas del día:

.seconds-hand {
  transform: rotate(var(--deg));
  transform-origin: bottom center;
}

Para elementos rotados en 3D, considere usar rotateX() y rotateY().

este rotate() La función se define en Módulo de transformación CSS Nivel 1 Especificación.

sintaxis

rotate() = rotate( ( <angle> | <zero> ) )

argumento

/* <angle> */
rotateZ(90deg) /* Rotates 90 degrees clockwise  */
rotateZ(-180deg) /* Rotates 180 degrees counterclockwise */

/* <angle> in turns */
rotateZ(0.25turn) /* Rotates a quater turn clockwise. */
rotateZ(1turn)    /* Rotates a full 360-degree turn. */

/* <angle> in radians */
rotateZ(1.57rad)  /* Rotates ~90 degrees clockwise. */
rotateZ(-3.14rad) /* Rotate ~180 degrees counterclockwise. */

este rotate() La función acepta un solo <angle> Parámetros que determinan su sentido de giro. Los parámetros positivos rotan el elemento en el sentido de las agujas del reloj, mientras que los parámetros negativos rotan el elemento en el sentido contrario a las agujas del reloj.

este <angle> Hay cuatro tipos de unidades para elegir:

• deg: Un título es 1/360 Un círculo completo.
• grad: Un gradiente es 1/400 Un círculo completo.
• rad: Los radianes son la longitud del diámetro del círculo que rodea el arco de la forma. un radian es 180dego 1/2 Un círculo completo. Un círculo completo mide 2π radianes, que es igual a 6.2832rad o 360deg.
• turn: Un círculo es un círculo completo. Entonces, la mitad de un círculo es igual a .5turno 180deg.

también, rotate() Gira un elemento alrededor de su eje central. Para cambiar el punto de rotación tenemos que pasar el punto específico a transform-origin El atributo que se utilizará como eje de rotación.

Uso básico

este rotate() Las funciones son la columna vertebral de algunas animaciones básicas que probablemente encontrarás, como cambiar de “+” a “x” al abrir un acordeón. Podemos hacer esto girando el signo “+” 45deg.

Entonces, si tenemos un botón como este:

<button class="toggle">
  <span class="icon">+</span>
  <span class="label">Open Section</span>
</button>

Podemos agregar algo de JavaScript allí para activar .active Gire las categorías del ícono cuando se hace clic en un botón:

.toggle.active .icon {
  transform: rotate(45deg);
}

¿Alguna vez has visto esos menús que cambian de un ícono de hamburguesa a un ícono de “X” cerrada cuando abres un menú desplegable o una barra lateral? ¡Esto también es reencarnación!

Comenzamos con tres tramos diseñados como líneas horizontales:

<button class="hamburger" id="hamburgerBtn">
  <span class="bar top"></span>
  <span class="bar middle"></span>
  <span class="bar bottom"></span>
</button>

.bar {
  width: 100%;
  height: 4px;
  background: #333;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

Tenga en cuenta que tenemos un transition De esta manera, cuando se hace clic en el botón y se produce la rotación (nuevamente usando JavaScript para alternar) .active Categoría), abarcan una transformación suave:

.hamburger.active .top {
  transform: translateY(14px) rotate(45deg);
}

.hamburger.active .middle {
  opacity: 0;
}

.hamburger.active .bottom {
  transform: translateY(-14px) rotate(-45deg);
}

Ejemplo: icono de carga

También podemos usar rotate() Se utiliza para cargar indicadores. Ya sabes, el indicador de carga generalmente gira a medida que se carga la página. Un ejemplo común es un semicírculo que gira hasta que se carga la página.

este .spinner Usar CSS animation Define la abreviatura del indicador de carga giratorio infinito, y @keyframes spin define un 360deg rotar con rotate() Función.

.spinner {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

Ahora la ruleta sigue girando:

Ejemplo: rotar texto

¡La rotación de objetos no siempre tiene que ver con la animación! Por ejemplo, podríamos colocar algo como una etiqueta de “características” al lado de una publicación de blog y rotarla verticalmente para obtener un efecto visual interesante.

.vertical-header {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

demostración

Veamos una animación más compleja para mostrar lo simple que es. rotate() Cosas relacionadas con CSS. Si “vuelves a ejecutar” la demostración, verás que la foto se mueve hacia adelante y hacia atrás. También puedes arrastrar la foto de izquierda a derecha para rotarla.

Especificación

CSS rotate() La función se define en Módulo de transformación CSS Nivel 1 Especificación, actualmente en borrador editorial.

Soporte del navegador

Importante