Паварот выявы з JavaScript

Мне трэба павярнуць малюнак з JavaScript у інтэрвалах 90 градусаў. Я паспрабаваў некалькі бібліятэк, як jQuery цыклічнага зруху і Raphaël , але ў іх ёсць тая ж самая праблема - выява паварочваецца вакол свайго цэнтра. У мяне ёсць куча кантэнту з усіх бакоў малюнка, і калі малюнак не квадратнае, яго часткі будзе ў канчатковым выніку на вяршыні гэтага зместу. Я хачу, каб малюнак, каб застацца ўнутры бацькоўскага DIV, які мае не больш-с і ўсталяваць макс вышыню.

Выкарыстанне jQuery круціцца, як гэта ( http://jsfiddle.net/s6zSn/1073/ ):

var angle = 0;
$('#button').on('click', function() {
    angle += 90;
    $("#image").rotate(angle);
});

Вынікі ў гэтым:

How <a href=jQuery rotate works">

І гэта вынік я хацеў бы замест гэтага:

How I would like it to work

Хто-небудзь ёсць ідэі пра тое, як гэта зрабіць?

38
лепшы спосаб пайсці выкарыстоўвае CSS3 ключавыя кадры я баюся
дададзена аўтар DiederikEEn, крыніца
Выкарыстанне CSS трансфармуе круціць ўвесь кантэйнер вакол нейкі момант вы любіце.
дададзена аўтар Blazemonger, крыніца
@DiederikEEn я таксама баюся ...
дададзена аўтар Code Whisperer, крыніца
FYI я патлумачыў, чаму гэта адбываецца тут
дададзена аўтар MMM, крыніца
Пытанне Nicely На пытанне (па TheQ)
дададзена аўтар Ahsan, крыніца

8 адказы

You use a combination of CSS's transform (with vendor prefixes as necessary) and transform-origin, like this: (also on jsFiddle)

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

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">
  
</div>
</div> </div>
57
дададзена
Звярніце ўвагу, што вы сапраўды павінны прымяніць гэта да кантэйнера малюнка, калі вы хочаце, каб мяжа працаваць правільна.
дададзена аўтар Niet the Dark Absol, крыніца
@maxshuty Гэта не працуе належным чынам. Тут .
дададзена аўтар Niet the Dark Absol, крыніца
Так нешта накшталт гэтага ? Я дадаў кантэйнер вакол малюнка, прымяняецца клас да кантэйнера, скарэкціраваны некаторыя CSS ... У прынцыпе, галоўнае, каб пераключыць шырыню і вышыню кантэйнера вакол пры павароце на 90 або 270.
дададзена аўтар Niet the Dark Absol, крыніца
<�Б> Гэта як вы адказаць на пытанне. Ніца адзін.
дададзена аўтар T.J. Crowder, крыніца
@OmShankar Я думаю, што гэта ўсё яшчэ дае OP дастаткова, каб ісці далей.
дададзена аўтар Blazemonger, крыніца
@Kolink: Гэта выглядае вельмі перспектыўным, трэба Afk трохі зараз, але я буду старацца і рэалізаваць яго на маім сайце заўтра. Дзякуй!
дададзена аўтар TheQ, крыніца
Гэта амаль працуе, аднак звярніце ўвагу, што гэта: jsfiddle.net/bhN6e . Я хацеў бы тэкст пад малюнкам, каб застацца ніжэй малюнка, нават пасля кручэння. Як гэта прама цяпер, малюнак заканчваецца на верхняй часткі тэксту.
дададзена аўтар TheQ, крыніца
@Blazemonger, Паглядзіце на <�б> карцінкі у пастаўленае пытанне. OP ўжо паказаў у гэтым пытанні, што ён/яна ў стане дасягнуць, што кручэнне <�б> ужо
дададзена аўтар Om Shankar, крыніца
Nopes! гэта пераўтварэнне прыносіць OP да адной і той жа праблемы. Пераўтварэнне прымяняецца, але не так, як АП хоча
дададзена аўтар Om Shankar, крыніца
Дадаць фільтр: ProgID: DXImageTransform.Microsoft.BasicImage (кручэнне = 1); для падтрымкі IE8 і IE7. <�Код> кручэнне = 1 90 °, 2 на 180 °, 3 для 270 ° С.
дададзена аўтар mqchen, крыніца
var angle = 0;
$('#button').on('click', function() {
    angle += 90;
    $('#image').css('transform','rotate(' + angle + 'deg)');
});

Паспрабуйце гэты код.

7
дададзена

я бачыў бегавой код .Ёсць адна лінія карэкцыі ў вашым кодзе. запіс . $ ( "# Абгортка") круціць (кут); . Замест $ ( "# малюнак") круціць (кут); і вы атрымаеце жаданы вынік, спадзяюся, што гэта тое, што вы хочаце.

4
дададзена
+1: Працоўны код: jsfiddle.net/MQ3YF
дададзена аўтар lepe, крыніца
@ Mikeys4u Бібліятэка не загружаецца. Гэта адзін працуе: jsfiddle.net/MQ3YF/112
дададзена аўтар Piyin, крыніца
Скрыпка вышэй не працуе ....
дададзена аўтар Mikeys4u, крыніца

CSS можа быць ужыты, і вы павінны ўсталяваць Transform-паходжання правільна, каб атрымаць прыкладное пераўтварэнне ў тым, як вы хочаце

Глядзіце скрыпку:

http://jsfiddle.net/OMS_/gkrsz/

Main code:

/* 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 and 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) );

Logic:

Падзяліце вышыню малюнка на 2. Элемент спектральна-х і Transform-у значэнне павінна быць гэтым значэннем

Link:

<�Моцны> пераўтварэнні паходжання ў CSS | MDN

3
дададзена
Праблема заключаецца ў тым, што вы не можаце мець адзін крыніца для апрацоўкі ўсіх чатырох пазіцый. Вось чаму я затрымаўся з адной крыніцы і адрэгуляваць становішча, каб правільна размясціць.
дададзена аўтар Niet the Dark Absol, крыніца
Здаецца трохі занадта заблытаным. Я аддаю перавагу маё рашэнне: р Гэта зусім не залежыць ад памеру малюнка.
дададзена аўтар Niet the Dark Absol, крыніца
Што рабіць, калі змены памеру малюнка, альбо проста не фіксуецца? Гэта будзе беспарадак. Майце на ўвазе, што гэта бардак з 180 і 270 абаротаў;)
дададзена аўтар Niet the Dark Absol, крыніца
@Kolink. Крута. У любым выпадку, у вас ёсць jQuery і JS на старонцы. Можна разлічыць і прымяніць гэты CSS на лета. Я рэдагаванне адказу на JS. Дзякуй за ўказанне!
дададзена аўтар Om Shankar, крыніца
@Kolink, я іду ў канцэпцыі, як чытаць Mozilla DN. У вашым рашэнні (што, вядома, добра), вы робіце дадатковую tranlate. Гэта падман :) Акрамя таго, канцэптуальна, пераклад з'яўляецца тое, што дасягаецца з дапамогай пераўтварэнні каардынатаў значэння - толькі тое, што яны пераводзяць паходжанне пераўтварэнні, а не сам элемента
дададзена аўтар Om Shankar, крыніца
FYI: Калі вы хочаце ўсталяваць спектральна паходжання у цэнтры выявы проста выкарыстаць значэнне 50% - напрыклад, <�Код> спектральна-паходжанне: 50% 50%;
дададзена аўтар Robin, крыніца

Спадзяюся, што гэта можа дапамагчы вам!

<input type="button" id="left"  value="left" />
<input type="button" id="right" value="right" />


<script>
 var angle = 0;
    $('#left').on('click', function() {  
        angle -= 90;
        $("#image").rotate(angle);
    });

    $('#right').on('click', function() {  
        angle += 90;
        $("#image").rotate(angle);
    });
</script>

Паспрабуйце

3
дададзена
гэта працуе толькі таму, што ў вас ёсць гіганцкі запас
дададзена аўтар aeosynth, крыніца

You can always apply CCS class with rotate property - http://css-tricks.com/snippets/css/text-rotation/

Каб захаваць звернутае малюнак у межах вашага DIV памеры вам трэба наладзіць CSS, а таксама, няма патрэбы, каб выкарыстоўваць JavaScript, за выключэннем дадання класа.

2
дададзена
«Класс CCS з паварочваюць ўласнасць» - як памылкай друку і канцэптуальныя памылкамі?
дададзена аўтар Om Shankar, крыніца

Няма неабходнасці ў jQuery і шмат у CSS больш (<�моцны> Звярніце ўвагу, што некаторыя браўзэры патрэбныя дадатковыя CSS )

Выгляд, што адправіў @Abinthaha, але чысты JS, без неабходнасці JQuery.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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;
}
</div> </div>
1
дададзена
Арыгінальны адказ прыняў усё яшчэ працуе лепш для майго выпадку выкарыстання, так як мне трэба тэкст цячы правільна ніжэй малюнка, і адаптавацца да памеру малюнка. jsfiddle.net/soqkrbut з'яўляецца абноўленай версіяй арыгінальнага адказу, які працуе сапраўды гэтак, як я хачу. Выкарыстоўваючы гэты код не працуе, гл jsfiddle.net/uzhoy6pm
дададзена аўтар TheQ, крыніца

На аснове Anuga адказаць я падоўжыў яго на некалькі малюнкаў.

Сачыце за вуглом павароту малюнка як атрыбут ладу.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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;
}


</div> </div>

<�Моцны> Edit

Выдалены па модулю, выглядае дзіўна.

0
дададзена