CSS3 Tourner l'image en préservant sa position supérieure gauche
Question
J'ai une image que la largeur et la hauteur peuvent varier.Je veux pouvoir faire pivoter l'image en préservant les positions initiales supérieures et gauche.J'utilise la transformation: tournez (270deg); Le problème est que l'image se déplace vers la gauche.Je sais que la propriété Transform-Origin CSS peut résoudre le problème, mais comment calculer les valeurs supérieures gauche de cette propriété?Peut-être qu'il y a une formule pour ça? Voici l'exemple montrant que l'image est déplacée vers la gauche de la position gauche initiale. 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);">
La solution
Ceci est la rotation - Animation rotative
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);
}