CSS3 Ruota l'immagine che conserva la sua posizione superiore sinistra
Domanda
Ho un'immagine che larghezza e altezza possono variare.Voglio essere in grado di ruotare l'immagine a preservare le posizioni iniziali iniziali e sinistro.Sto usando la trasformazione: rota (270DEG); Il problema è che l'immagine si sta spostando a sinistra.So che la proprietà CSS di Transform-Origin può risolvere il problema, ma come calcolare i valori in alto a sinistra per questa proprietà?Forse c'è una formula per questo? Ecco l'esempio che mostra che l'immagine viene spostata a sinistra dalla posizione iniziale a sinistra. 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);">
. Soluzione
Questa è la rotazione - Ruota animazione Nota : La dimensione dell'immagine è stata modificata a causa della migliore visibilità!
.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);
}
. Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow