Alguém conseguiu entender bem como chegar nesses resultados e quais outras aplicações eu poderia usar essa mesma formular para chegar a outros exemplos.
.banner-twitter {
position: absolute;
top: 0;
right: 0;
transform-origin: 0 0;
transform: translate(6.5754em, -2.4749em) rotate(45deg);
}
Oii Flávio!
Com a propriedade position você consegue forçar o positionamento de um elemento, informando sempre as coordenadas do eixo horizontal e vertical. No caso aí ele está usado top: 0 para posicionar verticalmente ao topo, e right: 0 para posicionar horizontalmente à direita.
Depois com a propriedade transform-origin definiu um novo ponto de inicio da transformação que por padrão é o centro do elemento. Veja como funciona em detalhes aqui: https://developer.mozilla.org/pt-BR/docs/Web/CSS/transform-origin
Com a propriedade transform foi usada as funções rotate() onde rotacionou o elemento à 45º sentido horário, e a função translate() que transladou (moveu) o elemento verticamente e horizontalmente com os valores informados.
Faixas como estas do exemplo podem ser usadas em fotos de produtos para informar algum desconto. Outro exemplo é a faixa de "fork-me" do Github.
bons estudos, abraços!
Na explicação da aula 04 do curso de HTML - CSS II, é demostrado essa formula.
Na horizontal: cos(45) * (altura - largura) + largura
Na vertical: -1 sen(45) altura
Que eu não faço idéia de onde foi tirada.
( º - º )