Função rotateX

A função rotateX define uma rotação em relação ao eixo X no espaço tridimensional. É usada em conjunto com a propriedade transform. O valor da propriedade é um ângulo em qualquer unidade de ângulo. Um valor positivo gira o elemento em nossa direção, um valor negativo gira para longe de nós. A rotação é realizada ao redor do ponto definido pela propriedade transform-origin.

Sintaxe

cssseletor {
  transform: rotateX(ângulo);
}

Exemplo

Neste exemplo, o bloco girará 180 graus em torno do eixo X ao passar o mouse. Para uma transição suave da rotação, a propriedade transition foi adicionada:

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);
}

Результат:

Exemplo

Vamos mudar o eixo de rotação usando a propriedade 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);
}

Результат:

Exemplo

Vamos definir um â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);
}

Результат:

Veja também