J'essaie de faire pivoter un div sur une page et que je me repose sur le côté gauche de son élément parent (le corps dans ce cas). Je sais à propos de Transform-Origin, mais peu importe les valeurs que je l'insère, il ne s'aligne pas correctement.
http: // jsfiddle .NET / QPHCM / P>
$transform: rotate(90deg);
$transform-origin: 0 0;
body {
border: 1px solid red;
}
.handle {
width: 50px;
height: 15px;
background: blue;
color: white;
text-align: center;
padding: 5px;
line-height: 15px;
transform: $transform;
-moz-transform: $transform;
-webkit-transform: $transform;
transform-origin: $transform-origin;
-moz-transform-origin: $transform-origin;
-webkit-transform-origin: $transform-origin;
}
3 Réponses :
vérifier ma solution ( $ transform-origine: 12px 11px; ):
http://jsfiddle.net/qphcm/1/
Je ne sais pas réellement pourquoi cela fonctionne-t-il de cette façon, mais cela fonctionne.
Essayez de changer de "texte" à l'intérieur de ce bloc à autre chose. Ça va casser.
Étant donné que la rotation est autour du centre de l'élément, elle n'est pas alignée avec gauche: 0.
Utilisation: La moitié négative de la largeur de l'élément vous obtient Là. travail exemple .
Voici ce que j'ai fait pour obtenir une fonctionnalité similaire.
var rotateStep = 0;
$('#rotateIcon').click(function() {
rotateStep += 1;
var img = $("#rxImage");
if(rotateStep % 4 == 0){
img.css('transform-origin', 'top left');
img.css('transform', 'rotate('+ rotateStep*90 +'deg) translate(0%, 0%)');
}else if(rotateStep % 4 == 1){
img.css('transform-origin', 'bottom left');
img.css('transform', 'rotate('+ rotateStep*90 +'deg) translate(-'+(img.height() / img.width() * 100)+'%, 0%)');
}else if(rotateStep % 4 == 2){
img.css('transform-origin', 'bottom right');
img.css('transform', 'rotate('+ rotateStep*90 +'deg) translate(100%, 100%)');
}else if(rotateStep % 4 == 3){
img.css('transform-origin', 'top right');
img.css('transform', 'rotate('+ rotateStep*90 +'deg) translate(0%, -'+((img.width() / img.height()) * 100)+'%)');
}
});