css3 gira a imagem preservando sua posição superior esquerda
Pergunta
Eu tenho uma imagem cuja largura e altura podem variar.Quero poder girar a imagem preservando as posições iniciais superior e esquerda.Estou usando a transformação:girar (270 graus);O problema é que a imagem está se movendo para a esquerda.Eu sei que a propriedade CSS transform-origin pode resolver o problema, mas como calcular os valores superiores esquerdos para esta propriedade?Talvez haja uma fórmula para isso?Aqui está o exemplo que mostra que a imagem é movida para a esquerda a partir da posição esquerda inicial. http://jsfiddle.net/h48ca/2/
<img src="https://dl.dropboxusercontent.com/u/31490359/e001420737da443b0fb75abfaddc5f22.jpg" style="transform: rotate(270deg); -webkit-transform: rotate(270deg); -ms-transform:rotate(270deg);">
Solução
Esta é a rotação - Girar animação
observação :o tamanho da imagem foi modificado para melhor visibilidade!
HTML
<img src="https://dl.dropboxusercontent.com/u/31490359/e001420737da443b0fb75abfaddc5f22.jpg">
css
img{
width:40%;
height:auto;
position:absolute;
top:100px;
left:50px;
transition:all 2s ease;
}
img:hover {
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-ms-transform:rotate(270deg);
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow