[JQUERY] jQuery를 사용하여 사업부를 회전하는 방법 [마감]

jQuery를 사용하여 사업부를 회전하는 방법 [마감]

해결법

1. ---

   1.편집 : jQuery를 1.8에 대한 업데이트

   편집 : jQuery를 1.8에 대한 업데이트

   jQuery를하기 때문에 1.8 브라우저 특정 변환이 자동으로 추가됩니다. jsFiddle 데모

   var rotation = 0;
   
   jQuery.fn.rotate = function(degrees) {
       $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
       return $(this);
   };
   
   $('.rotate').click(function() {
       rotation += 5;
       $(this).rotate(rotation);
   });
   

   편집 : 추가 된 코드는 JQuery와 기능을 확인합니다.

   더를 읽을 수 없다 분들을 위해, 여기 당신은 간다. 자세한 내용과 예제를 보려면에 읽어 보시기 바랍니다. jsFiddle 데모.

   var rotation = 0;
   
   jQuery.fn.rotate = function(degrees) {
       $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                    '-moz-transform' : 'rotate('+ degrees +'deg)',
                    '-ms-transform' : 'rotate('+ degrees +'deg)',
                    'transform' : 'rotate('+ degrees +'deg)'});
       return $(this);
   };
   
   $('.rotate').click(function() {
       rotation += 5;
       $(this).rotate(rotation);
   });
   

   편집 : jQuery를 다 회전 언급이 게시물에 대한 의견 중 하나입니다. jQuery를위한이 플러그인은 기본적으로 IE8을 지원하는 위의 기능을 수행합니다. 그것은 가치가 당신이 최대 호환성 또는 더 많은 옵션을 원하는 경우 사용하고있을 수 있습니다. 그러나 최소한의 오버 헤드, 위 기능을 제안한다. 그것은 IE9 +, 크롬, 파이어 폭스, 오페라, 그리고 많은 다른 사람을 작동합니다.

   바비 ...이 실제로 자바 스크립트를하고 싶은 사람들을위한 것입니다. 이것은 자바 스크립트 콜백에 회전 필요할 수 있습니다.

   여기 jsFiddle이다.

   사용자 정의 간격으로 회전하려는 경우, 당신은 jQuery를 사용하여 수동으로 클래스를 추가하는 대신 CSS를 설정할 수 있습니다. 이처럼! 나는 대답의 하단에 모두 jQuery를 옵션을 포함했다.

   HTML

   <div class="rotate">
       <h1>Rotatey text</h1>
   </div>
   

   CSS

   /* Totally for style */
   .rotate {
       background: #F02311;
       color: #FFF;
       width: 200px;
       height: 200px;
       text-align: center;
       font: normal 1em Arial;
       position: relative;
       top: 50px;
       left: 50px;
   }
   
   /* The real code */
   .rotated {
       -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */
       -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */
       -ms-transform: rotate(45deg);  /* IE 9 */
       -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */
       transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
   }
   

   jQuery를

   확인이는 $ (문서) .ready에 싸여되어 있는지 확인

   $('.rotate').click(function() {
       $(this).toggleClass('rotated');
   });
   

   사용자 정의 간격

   var rotation = 0;
   $('.rotate').click(function() {
       rotation += 5;
       $(this).css({'-webkit-transform' : 'rotate('+ rotation +'deg)',
                    '-moz-transform' : 'rotate('+ rotation +'deg)',
                    '-ms-transform' : 'rotate('+ rotation +'deg)',
                    'transform' : 'rotate('+ rotation +'deg)'});
   });
   

from https://stackoverflow.com/questions/3020904/how-to-rotate-a-div-using-jquery by cc-by-sa and MIT license