Solucionado
Na explicação ele da as seguintes formulas: (Na horizontal: cos(45) (altura - largura) + largura) - (Na vertical: -1 sen(45) * altura). Quando eu uso cada uma e COMO? Não sei como ele chegou nos numeros "6.5765em na horizontal e -2.4745em na vertical." Entendi foi nada dessa parte :(
Excelente pergunta. Tbm nao entendi os valores. Ate pq fazendo a conta, o resultado parece não bater!
Ex com 14em de largura e 3.5 de altura daria: cos(45) * (3.5 - 14) + 14 e isso dá 8.48em:
https://www.google.com.br/search?q=cos(45)+*+(3.5+-+14)+%2B+14
Ops, agora que reparei que o google tava fazendo a conta em radianos, nao em graus. Oops.
Então refazendo as contas usando os valores de 14em pra largura e 3.5em pra altura, ficaria:
cos(45deg) * (3.5 - 14) + 14
... que é exatamente 6.57em do exercicio ( https://www.google.com.br/search?q=cos(45deg)+*+(3.5+-+14)+%2B+14 )
Mesma coisa pro valor na vertical: -1 * sen(45deg) * 3.5 dá -2.47em
Quebrei um pouco mais a cachola aqui e usei uma calculadora online pra exatamente esse tipo de efeito.
Dá pra deixar o efeito genérico se fizermos as contas com porcentagens. O resultado que cheguei usa:
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
Em partes:
a) Com transform-origin: 0 100% eu mudo o eixo de rotação pro ponto esquerdo inferior do elemento. Aí aplico translate vertical de -100% nele pra ele subir fora da tela. Ao rotacionar 45deg, isso faz com que o ponto esquerdo inferior esteja ja alinhado com o topo da pagina. Demo: http://codepen.io/sergiolopes/pen/wgegag
b) Feito isso, falta a gente deslocar o elemento mais pra direita pro ponto direito inferior encostar na borda direita da tela. Mas quanto? Aquele site usa 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%.