Ich brauche, um ein Bild mit Javascript in 90-Grad-Intervallen zu drehen. Ich habe versucht, ein paar Bibliotheken wie jQuery rotate und Raphaël, aber sie haben das gleiche Problem - Das Bild wird um seine Mitte gedreht. Ich habe eine Reihe von Inhalten auf allen Seiten des Bildes, und wenn das Bild nicht perfekt quadratisch ist, werden Teile davon oben auf dem Inhalt landen. Ich möchte, dass das Bild innerhalb seiner übergeordneten div, die max-mit und max-Höhe gesetzt hat zu bleiben.
Mit jQuery rotate wie diese ([
][3]):var angle = 0;
$('#button').on('click', function() {
angle += 90;
$("#image").rotate(angle);
});
Das Ergebnis ist dies:
Und das ist das Ergebnis, das ich stattdessen haben möchte:
Hat jemand eine Idee, wie man das erreichen kann?
Sie verwenden eine Kombination aus CSS's transform
(mit Hersteller-Präfixen, falls erforderlich) und transform-origin
, etwa so: [(auch auf jsFiddle)](
var angle = 0,
img = document.getElementById('container');
document.getElementById('button').onclick = function() {
angle = (angle + 90) % 360;
img.className = "rotate" + angle;
}
#container {
width: 820px;
height: 100px;
overflow: hidden;
}
#container.rotate90,
#container.rotate270 {
width: 100px;
height: 820px
}
#image {
transform-origin: top left;
/* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left;
/* Chrome */
-ms-transform-origin: top left;
/* IE 9 */
}
#container.rotate90 #image {
transform: rotate(90deg) translateY(-100%);
-webkit-transform: rotate(90deg) translateY(-100%);
-ms-transform: rotate(90deg) translateY(-100%);
}
#container.rotate180 #image {
transform: rotate(180deg) translate(-100%, -100%);
-webkit-transform: rotate(180deg) translate(-100%, -100%);
-ms-transform: rotate(180deg) translateX(-100%, -100%);
}
#container.rotate270 #image {
transform: rotate(270deg) translateX(-100%);
-webkit-transform: rotate(270deg) translateX(-100%);
-ms-transform: rotate(270deg) translateX(-100%);
}
<button id="button">Click me!</button>
<div id="container">
<img src="http://i.stack.imgur.com/zbLrE.png" id="image" />
</div>
var angle = 0;
$('#button').on('click', function() {
angle += 90;
$('#image').css('transform','rotate(' + angle + 'deg)');
});
Versuchen Sie diesen Code.
Sie können die CCS-Klasse immer mit der Eigenschaft "Rotate" anwenden - http://css-tricks.com/snippets/css/text-rotation/
Um ein gedrehtes Bild innerhalb der "div"-Abmessungen zu halten, müssen Sie auch CSS anpassen. Es gibt keine Notwendigkeit, JavaScript zu verwenden, außer dem Hinzufügen von Klassen.