girarX()

A função CSS rotateX() gira um elemento em torno do eixo x em um espaço tridimensional. Especificamente, ele vira o elemento verticalmente, inclinando-o para trás ou para frente, dependendo do ângulo definido. É uma das muitas funções de transformação usadas na propriedade  transform  .

O eixo x é o eixo de rotação, então o elemento gira verticalmente. Imagine que um alfinete está preso no lado esquerdo de um elemento e só pode virar para cima ou para baixo.

Na demonstração abaixo, rotateX(0) é fornecido como rotação padrão do elemento:

.demo-element {
  transform: rotateY(var(--deg));
  transition: transform 0.3s ease;
}

A função rotateX() é definida na especificação  Módulo de transformação CSS nível 2  .

Sintaxe

rotateX() = rotateX( [ <angle> | <zero> ] )

Argumentos

/* angle in degrees */
rotateX(45deg) /* rotates 45 degrees backwards */
rotateX(-90deg) /* rotates 90 degrees forwards */

/* angle in turns */
rotateX(0.5turn) /* rotates 180 degrees (half a full turn) */
rotateX(1turn)   /* Rotates a full 360-degree turn */

/* angle in radians */
rotateX(1.57rad) /* Approximately 90 degrees */

/* angle in gradians */
rotate(200grad)  /* rotates 180 degrees */

A função rotateX() precisa de uma única  rotateX() = rotateX( [ <angle> | <zero> ] )  argumento, que define o quanto o elemento é girado em torno de seu eixo vertical.

• /* angle in degrees */
  rotateX(45deg) /* rotates 45 degrees backwards */
  rotateX(-90deg) /* rotates 90 degrees forwards */

  /* angle in turns */
  rotateX(0.5turn) /* rotates 180 degrees (half a full turn) */
  rotateX(1turn) /* Rotates a full 360-degree turn */

  /* angle in radians */
  rotateX(1.57rad) /* Approximately 90 degrees */

  /* angle in gradians */
rotate(200grad) /* rotates 180 degrees */: valores como rotateX(), ###CODE_e6765dd74e03079dc29fea610005e051## #, <angle>, <angles>, etc. podem ser aprovados.

• Um ângulo positivo inclina a parte superior do elemento para trás e a parte inferior para frente.
• Enquanto um ângulo negativo faz o contrário: ele inclina a parte superior do elemento em sua direção e a parte inferior para longe de você.

O tipo rotateX() = rotateX( [ <angle> | <zero> ] ) pode ser uma das quatro unidades:

• 0.5turn: Um grau é -90deg de um círculo completo.
• 1.57rad: Um gradian é <angle> de um círculo completo.
• deg: Um radiano é o comprimento do diâmetro de um círculo ao redor do arco da forma. Um radiano é 1/360 ou grad de um círculo completo. Um círculo completo equivale a 2π radianos, o que equivale a 1/400 ou rad.
• 180deg: Uma volta é um círculo completo. Portanto, a metade de um círculo é igual a 1/2 ou 1/360.

Configurando transformações 3D

rotateX() faz parte das funções de transformação CSS 3D, por isso é melhor representado em uma visualização 3D. Para rotateX() para produzir um efeito 3D visível, você precisa definir o  .5turn  propriedade no elemento pai. A propriedade perspective determina como o elemento é projetado, adicionando profundidade ao elemento e fazendo com que pareça natural e 3D.

Nesta demonstração, temos dois controles deslizantes para controlar o grau rotateX() e a propriedade .5turn .

Na ausência de .5turn, o elemento parece estranhamente distorcido e feio.

Também vale a pena configurar  perspective  para rotateX(), que determina se os filhos desse elemento estão posicionados no espaço 3D ou achatados.

Uso básico

Um dos usos mais populares de rotateX() é a criação de cartões flip que revelam o conteúdo no verso quando clicados ou passados. Você pode usar essa técnica para tabelas de preços, cartões de perfil ou galerias interativas.

Para preparar o cenário e dar ao cartão um valor de projeção e presença 3D, definimos os estilos .5turn e rotateX() nos elementos pais.

.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

Em seguida, posicionamos as faces frontal e traseira do cartão absolutamente dentro do contêiner enquanto definimos preserve-3d para rotateX():

.flip-card-front,
.flip-card-back {
  position: absolute;
  backface-visibility: hidden;
}

Em seguida, pré-giramos a face posterior em 180 graus, para que esteja pronta para ser revelada quando a carta virar

.flip-card-back {
  transform: rotateX(180deg);
}

E, finalmente, viramos o cartão quando o pai é perspective-ed:

.flip-card:hover .flip-card-inner {
  transform: rotateX(180deg);
}

Exemplo: botão giratório de carregamento 3D

Também podemos criar indicadores de carregamento envolventes com a função rotateX() ..

Neste exemplo, não estamos apenas usando a função rotateX() , mas também a combinamos com a função backface-visibility para dois eixos animação de rotação. Ao girar continuamente um elemento horizontal e verticalmente, criamos um efeito giratório 3D.

Mais uma vez, damos ao pai do elemento um .5turn:

.spinner-wrapper {
  perspective: 1000px;
  margin-bottom: 2rem;
}

Em seguida, aplicamos a animação ao elemento usando a propriedade abreviada CSS .flip-card-front,
.flip-card-back {
position: absolute;
backface-visibility: hidden;
} .

.spinner {
  width: 80px;
  height: 80px;
  animation: spin-3d 2s ease-in-out infinite;
}

A seguir, definimos o quadro-chave, que determina como o elemento gira de um ponto a outro.

@keyframes spin-3d {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(180deg) rotateY(90deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(360deg) rotateY(270deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

A ordem em que as funções transform são definidas é importante. O efeito da primeira função ganha vida antes da segunda, então em :hover o elemento vira na metade horizontal antes da virada vertical, e a animação é tão suave que você quase não percebe.

Exemplo: acordeão 3D

Vamos pular a chata animação de revelação do conteúdo do componente acordeão e tornar a nossa um pouco interessante.

Podemos aprimorar acordeões tradicionais adicionando uma rotateX() rotação sutil quando os itens se expandem ou contraem, criando um efeito de queda mais escalonado que envolve ainda mais o usuário e melhora a experiência, em vez da simples animação de deslizar para baixo e voltar para cima.

Mais uma vez, como sempre, definimos a perspectiva no pai

.accordion-item {
  perspective: 1000px;
}

Em seguida, definimos transform e rotateX(). Como queremos que rotateY() caia em direção ao usuário, usamos um ângulo negativo de 90° para deslocar o elemento para fora da visão do usuário.

Além disso, podemos alterar o eixo de rotação padrão do centro para o topo usando perspective

.accordion-content {
  transform-origin: top;
  transform: rotateX(-90deg);
  overflow: hidden;
  transition:
    transform 0.4s ease,
    opacity 0.3s ease,
    max-height 0.4s ease;
}

O .spinner-wrapper {
perspective: 1000px;
margin-bottom: 2rem;
} garante que a rotação ocorra a partir da borda superior, fazendo com que pareça uma porta abrindo para baixo, enquanto animation faz com que o conteúdo pareça desdobrar-se à vista.

À medida que o acordeão se abre, o elemento rotateY() cai de maneira escalonada até 0 graus, que é a posição padrão.

.accordion-item.open .accordion-content {
  transform: rotateX(0deg);
  opacity: 1;
  max-height: 500px;
}

Uma observação sobre rotateX() e rotateX()

Por padrão, a função rotateX() gira um elemento em torno de seu centro. No entanto, você pode alterar esse eixo de rotação usando a propriedade CSS  rotateX() . rotateX() permite alterar o ponto de origem de qualquer função transform , em vez de ficar restrito para transform-origin, você pode use .accordion-content, ###CODE_eae544240c02 8233200410e1a046c96d###, transfom-origin: top;, ou mesmo porcentagens e comprimentos.

.child {
  transform: rotateX(120deg);
  transform-origin: top center;
}

Especificação

A função CSS rotateX() é definida no rascunho  CSS Transforms Module Nível 2  .

Suporte ao navegador

A função rotateX() tem suporte básico em todos os navegadores modernos.

rotateX() originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.