Cálculo Trigonometria

Olá!

Para entender a fórmula vamos precisar primeiro entender direitinho o que precisamos fazer. Para ficar mais fácil fiz alguns desenhos ilustrando a solução do problema.

Vamos começar com esse aqui:

Quando rotacionamos o banner, estamos movendo as posições dos pontos vermelho e azul. Como objetivo queremos fazer uma translação vertical para que o ponto vermelho chegue no topo da tela e uma translação horizontal para que o ponto azul chegue no lado direito da tela.

Isso facilita a solução pois podemos tratar isso como dois problemas separados. Vamos começar calculando a distância vertical que devemos transladar o banner. A ideia geral está descrita na imagem abaixo:

Aqui a ideia é que quando rotacionamos o banner em 45 graus, ele faz o seu movimento sobre um círculo cujo raio é igual a altura do banner. Desse modo, da trigonometria podemos utilizar a função seno para descobrir qual a posição y do ponto depois de rotacionar ele 45 graus. O sinal da fórmula fica negativo simplesmente porque o nosso eixo y diminui para cima e queremos uma translação justamente nessa direção.

Agora vamos analisar o problema na horizontal:

Esse caso é um pouco mais difícil pois é mais fácil encontrar a posição do ponto verde depois da rotação que a posição do ponto azul (que é o que interessa pra gente). A posição do ponto verde pode ser encontrada de forma similar à distância vertical, só que nesse caso vamos ter um círculo de raio igual a largura do banner e queremos descobrir a posição x do ponto após a rotação. Por isso utilizamos o cosseno ao invés do seno.

Com a posição do ponto verde em mãos, precisamos conseguir a posição do ponto azul a partir do verde. Para isso sabemos que a distância do ponto verde para o ponto azul é igual a altura do banner. Além disso, a distância x entre eles é igual distância y por causa da rotação em 45 graus. Desse modo, temos um triângulo com dois lados igual onde sabemos qual é o tamanho da hipotenusa. Aí usamos aquela fórmula do cateto adjacente ao quadrado mais cateto oposto ao quadrado é igual a hipotenusa ao quadrado. Com isso descobrimos o tamanho do lado desse triângulo.

Com esses dados em mãos, podemos encontrar a posição do ponto azul fazendo x - y (posição x do verde menos a distância x entre o ponto verde e o azul). Para finalizar queremos saber quanto falta pra chegar no lado direito da tela. Então fazemos largura - (x - y) e aí chegamos na fórmula da distância horizontal.

Espero ter ajudado!

Fantastica explicacao, Jeferson!

Um tempo atrás eu tinha sugerido noutro post que dava pra simplificar essa conta e deixa-la inclusive generica.

Primeiro mudando o eixo de rotação com transform-origin pra ja posicionar um dos pontos corretamente e só precisar deslocar o outro. E segundo fazendo as contas com porcentagens ja que é transform e tudo feito em porcentagens é possivel. Ai chegava nesse numero magico que funciona pra qualquer elemento em 45deg:

transform-origin: 0 100%;
transform: translate(29.28%,-100%) rotate(45deg);

E isso funciona pra qualquer width/height que o elemento tenha. Exemplo:

http://codepen.io/sergiolopes/pen/MJoJWV

A conta aqui seria cos(45) * largura - largura. Daria pra fazer a conta com em e chegar num valor, mas como transform aplica porcentagens em cima justo da largura do elemento, fiz a conta de cos(45) * 100% - 100% chegando no mágico 29.28%.

Como passou disso:

horizontal = largura - (x-y)

(Essa fórmula acima eu entendi)

Pra isso?

horizontal = largura - (largura-altura) * cos(45)

Olá,

Para chegar na fórmula final vamos começar lembrando os valores de x e y que demonstramos antes:

x = largura * cos(45)
y = altura * cos(45)

Agora vamos substituir esses valores na fórmula do valor horizontal:

horizontal = largura - (x - y)
horizontal = largura - (largura * cos(45) - altura * cos(45))

Pela regra da propriedade distributiva da multiplicação, podemos dizer que:

(largura - altura) * cos(45) = largura * cos(45) - altura * cos(45)

Voltando na fórmula da horizontal:

horizontal = largura - (largura - altura) * cos(45)
horizontal = largura + (altura - largura) * cos(45)
horizontal = (altura - largura) * cos(45) + largura

E assim chegamos na fórmula original.