A funçãoCSSrotate3d() define uma transformação que gira um elemento em torno de um eixo fixo no espaço 3D, sem deformá-lo. Seu resultado é um dado do tipo<transform-function>.

No espaço 3D, rotações têm três graus de liberdade que, juntos, descrevem um único eixo de rotação. O eixo de rotação é definido por um vetor [x, y, z] e passado pela origem (como definido pela propriedadetransform-origin). Se, como especificado, o vetor não fornormalizado (isto é, se a soma dos quadrados das suas três coordenadas não for 1), ouser agent irá normalizá-lo internamente. Um vetor não-normalizável, como o vetor nulo [0, 0, 0], fará com que a rotação seja ignorada, mas sem invalidar toda a propriedade CSS.

Sintaxe

A quantidade de rotação criada porrotate3d() é especificada por três<number> e um<angle>. Os<number> representam as coordenadas x, y e z do vetor, denotando o eixo de rotação. O<angle> representa o ângulo de rotação; se positivo, o movimento será no sentido horário; se negativo, será no sentido anti-horário.

rotate3d(x, y, z, a)

Valores

x

É um<number> descrevendo a coordenada x do vetor denotando o eixo de rotação que pode ser entre 0 e 1.

y

É um<number> descrevendo a coordenada y do vetor denotando o eixo de rotação que pode ser entre 0 e 1.

z

É um<number> descrevendo a coordenada z do vetor denotando o eixo de rotação que pode ser entre 0 e 1.

a

É um<angle> representando o ângulo de rotação. Um ângulo positivo denota uma rotação no sentido horário, e um negativo no sentido anti-horário.

Coordenadas cartesianas em ℝ2	Essa transformação se aplica ao plano 3D e não pode ser representada em um plano.
Coordenadas homogêneas em ℝℙ2
Coordenadas cartesianas em ℝ3	$\left(\begin{array}{ccc}1+(1-cos(a))(x^2-1)& z·sin(a)+xy(1-cos(a))& -y·sin(a)+xz·(1-cos(a))\\ -z·sin(a)+xy·(1-cos(a))& 1+(1-cos(a))(y2-1)& x·sin(a)+yz·(1-cos(a))& ysin(a)\; +\; xz(1-cos(a))& -xsin(a)+yz(1-cos(a))& 1+(1-cos(a))(z2-1)& t\\ 0& 0& 0& 1\end{array}\right)$
Coordenadas homogêneas em ℝℙ3

Exemplos

Rotacionando no eixo y

HTML

<div>Normal</div><div>Rotacionado</div>

CSS

body {  perspective: 800px;}div {  width: 80px;  height: 80px;  background-color: skyblue;}.rotated {  transform: rotate3d(0, 1, 0, 60deg);  background-color: pink;}

Resultado

Rotacionando em um eixo customizado

HTML

<div>Normal</div><div>Rotacionado</div>

CSS

body {  perspective: 800px;}div {  width: 80px;  height: 80px;  background-color: skyblue;}.rotated {  transform: rotate3d(1, 2, -1, 192deg);  background-color: pink;}

Resultado

Compatibilidade com navegadores

Veja o tipo de dado<transform-function> para informações de compatibilidade.

Ver também

• transform
• <transform-function>