Ik moet een afbeelding met javascript in intervallen van 90 graden draaien. Ik heb een paar bibliotheken geprobeerd, zoals jQuery roteren en Raphael, maar ze hebben hetzelfde probleem: de afbeelding wordt rond het midden gedraaid. Ik heb een heleboel inhoud aan alle kanten van de afbeelding, en als de afbeelding niet perfect vierkant is, komen delen ervan bovenop die inhoud terecht. Ik wil dat de afbeelding binnen de bovenliggende div blijft, die is ingesteld op max-with en max-height.
Als u jQuery gebruikt, roteert u op deze manier (http://jsfiddle.net/s6zSn/1073/) :
var angle = 0;
$('#button').on('click', function() {
angle += 90;
$("#image").rotate(angle);
});
Resultaten hierin:
En dit is het resultaat dat ik in plaats daarvan zou willen:
Iemand een idee hoe dit te bereiken?
Antwoord 1, autoriteit 100%
U gebruikt een combinatie van CSS’s transform ( met leveranciersvoorvoegsels indien nodig) en transform-origin, zoals dit: (ook op 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="https://i.stack.imgur.com/zbLrE.png" id="image" />
</div>Antwoord 2, autoriteit 14%
var angle = 0;
$('#button').on('click', function() {
angle += 90;
$('#image').css('transform','rotate(' + angle + 'deg)');
});
Probeer deze code.
Antwoord 3, autoriteit 10%
JQuery en veel CSS zijn niet meer nodig (Merk op dat sommige browsers extra CSS nodig hebben)
Een beetje wat @Abinthaha heeft gepost, maar pure JS, zonder de noodzaak van jQuery.
let rotateAngle = 90;
function rotate(image) {
image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
rotateAngle = rotateAngle + 90;
}#rotater {
transition: all 0.3s ease;
border: 0.0625em solid black;
border-radius: 3.75em;
}<img id="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>Antwoord 4, autoriteit 4%
CSS kan worden toegepast en u moet transform-origin correct instellen om de toegepaste transformatie op de gewenste manier te krijgen
Zie de viool:
http://jsfiddle.net/OMS_/gkrsz/
Hoofdcode:
/* assuming that the image's height is 70px */
img.rotated {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform-origin: 35px 35px;
-webkit-transform-origin: 35px 35px;
-moz-transform-origin: 35px 35px;
-ms-transform-origin: 35px 35px;
}
jQuery en JS:
$(img)
.css('transform-origin-x', imgWidth / 2)
.css('transform-origin-y', imgHeight / 2);
// By calculating the height and width of the image in the load function
// $(img).css('transform-origin', (imgWidth / 2) + ' ' + (imgHeight / 2) );
Logica:
Deel de hoogte van de afbeelding door 2. De waarden transform-x en transform-y moeten deze waarde zijn
Link:
transform-origin bij CSS | MDN
Antwoord 5, autoriteit 4%
Ik hoop dat dit je kan helpen!
<input type="button" id="left" value="left" />
<input type="button" id="right" value="right" />
<img src="https://www.google.com/images/srpr/logo3w.png" id="image">
<script>
var angle = 0;
$('#left').on('click', function () {
angle -= 90;
$("#image").rotate(angle);
});
$('#right').on('click', function () {
angle += 90;
$("#image").rotate(angle);
});
</script>
Antwoord 6, autoriteit 4%
ik heb je actieve code gezien. Er is één regelcorrectie in je code.
Schrijf:
$("#wrapper").rotate(angle);
in plaats van:
$("#image").rotate(angle);
en je krijgt de gewenste output, ik hoop dat dit is wat je wilt.
Antwoord 7, autoriteit 3%
Je kunt de CCS-klasse altijd toepassen met de eigenschap rotate – http://css-tricks.com/snippets/css/text-rotation/
Om de geroteerde afbeelding binnen uw div-dimensies te houden, moet u ook CSS aanpassen, het is niet nodig om JavaScript te gebruiken, behalve om klasse toe te voegen.
Op basis van Anuga antwoord heb ik het uitgebreid naar meerdere afbeeldingen.
Houd de rotatiehoek van de afbeelding bij als een kenmerk van de afbeelding.
function rotate(image) {
let rotateAngle = Number(image.getAttribute("rotangle")) + 90;
image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
image.setAttribute("rotangle", "" + rotateAngle);
}.rotater {
transition: all 0.3s ease;
border: 0.0625em solid black;
border-radius: 3.75em;
}<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>
<img class="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/e/e0/Iron_Man_bleeding_edge.jpg"/>