Saya perlu untuk memutar gambar dengan javascript di 90 derajat interval. Saya telah mencoba beberapa perpustakaan seperti jQuery memutar dan Raphaël, tetapi mereka memiliki masalah yang sama - gambar berputar di sekitar pusat. Saya memiliki banyak konten di semua sisi gambar, dan jika gambar isn't sempurna persegi, bagian-bagian itu akan berakhir di atas konten tersebut. Saya ingin gambar untuk tinggal di dalam induknya div, yang memiliki max-dan max-height set.
Menggunakan jQuery memutar seperti ini ([
][3]):var angle = 0;
$('#button').on('click', function() {
angle += 90;
$("#image").rotate(angle);
});
Hasil ini:
Dan ini adalah hasil yang saya inginkan sebagai gantinya:
Ada yang punya ide tentang bagaimana untuk mencapai hal ini?
Anda menggunakan kombinasi CSS's mengubah
(dengan awalan vendor jika diperlukan) dan transform-origin
, seperti ini: [(juga di 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>
saya telah melihat anda menjalankan kode .Ada satu koreksi garis dalam kode anda.
Menulis:
$("#wrapper").rotate(angle);
bukannya:
$("#image").rotate(angle);
dan anda akan mendapatkan output yang diinginkan anda,harapan ini adalah apa yang anda inginkan.
CSS dapat diterapkan dan anda akan memiliki untuk mengatur transform-origin
dengan benar untuk mendapatkan hasil yang diterapkan transformasi dalam cara yang anda inginkan
Melihat biola:
Kode utama:
/* 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 dan 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) );
Logika:
Membagi gambar's tinggi sebesar 2. Yang mengubah-x
dan mengubah-y
nilai-nilai yang harus menjadi nilai ini
Link:
transform-origin pada CSS | MDN
Harap ini dapat membantu anda!
<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>
[Mencoba][1]
Anda selalu dapat menerapkan CCS kelas dengan memutar
property - http://css-tricks.com/snippets/css/text-rotation/
Untuk menjaga diputar dalam gambar anda div
dimensi yang anda butuhkan untuk menyesuaikan CSS juga, ada tidak perlu menggunakan JavaScript kecuali penambahan kelas.
Tidak perlu untuk jQuery dan banyak's CSS lagi (Perhatikan bahwa beberapa browser membutuhkan tambahan CSS)
Jenis apa @Abinthaha diposting, tapi murni JS, tanpa perlu 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"/>
Berdasarkan Anuga jawaban aku telah diperpanjang untuk beberapa gambar.
Menjaga melacak dari sudut rotasi gambar sebagai atribut gambar.
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"/>
Edit
Dihapus modulo, terlihat aneh.