Pular para o conteúdo principal

O CSS precisa de uma propriedade background-rotate

estava trabalhando em um final de semana em projeto de uma faculdade, o designer enfiou uns backgrounds no Adobe XD que, depois que fiz o download, estavam totalmente diferentes do que eu via na tela do XD, não entendo nada de Adobe XD mas acho que quando ele edita algum asset por lá, essa edição só fica na visualização, mas não no asset em si, acontece que o background estava virado para a horizontal e precisava virá-lo para a vertical, achei que seria uma tarefa simples no CSS, só que, para minha surpresa, não era! eu estava definindo o background diretamente na tag <body> do html, acontece que, não existe uma propriedade no CSS para girar um background-image, das técnicas que pesquisei via google/stackoverflow, consistiam de usar CSS transforms para girar o elemento inteiro e aí sim você estaria girando o background junto, mas isso é meio gambiarra pra mim, o ideal mesmo era existir uma propriedade tipo: background-rotate, o valor que você passaria para essa propriedade seria 90deg, 180deg... você poderia girar o background por si só dentro daquele elemento sem a necessidade de ter que girar o elemento inteiro, e como bônus, em casos muito específicos, rolaria até fazer uma animação, foi por isso que vendo a necessidade de se introduzir uma propriedade como essa é que abri uma issue no github do CSS Working Group pedindo essa feature, na minha humilde opinião é um recurso válido, pouparia os frontends de ter que fazer truques no CSS pra alcançar o efeito, depois que abri minha issue, fui notificado que alguém ja havia aberto outra issue para a mesma questão, então, apenas adicionei meu comentário lá, se você apoia essa ideia, coloca seu comentário lá também como um apoio https://github.com/w3c/csswg-drafts/issues/3183

Comentários