Функция rotateX

La función rotateX define la rotación alrededor del eje X en el espacio tridimensional. Se utiliza en conjunto con la propiedad transform. El valor de la propiedad es un ángulo en cualquier unidad de ángulos. Un valor positivo gira el elemento hacia nosotros, un valor negativo - alejándose de nosotros. La rotación se realiza alrededor del punto definido por la propiedad transform-origin.

Sintaxis

cssselector {
  transform: rotateX(ángulo);
}

Ejemplo

En este ejemplo, el bloque al pasar el cursor girará 180 grados alrededor del eje X. Para una transición suave se ha añadido la propiedad transition:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotateX(180deg);
}

Результат:

Ejemplo

Cambiemos el eje de rotación usando la propiedad transform-origin:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateX(180deg);
}

Результат:

Ejemplo

Establezcamos un ángulo negativo:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateX(-180deg);
}

Результат:

Véase también