jQuery에서 Div 요소 회전

jQuery에서 Div 요소 회전

---

div 요소를 회전하려고합니다 ... 이것은 DOM 신성 모 독일 수 있습니다. 캔버스 요소와 함께 작동 할 수 있습니까? 잘 모르겠습니다. 누군가 이것이 어떻게 작동하는지 또는 왜 작동하지 않는지에 대한 아이디어가 있다면 알고 싶습니다. 감사.

---

DIV를 회전하려면 WebkitTransform / -moz-transform: rotate(Xdeg).

이것은 IE에서 작동하지 않습니다. Raphael 라이브러리는 IE와 함께 작동하며 회전을 수행 합니다. 나는 그것이 canvases를 사용한다고 믿는다

회전을 애니메이션하려면 재귀 적 setTimeout()

jQuery를 사용하여 스핀의 일부를 수행 할 수도 있습니다. .animate()

요소의 너비를 고려해야합니다. 보이는 콘텐츠보다 너비가 큰를 회전하면 재미있는 결과를 얻을 수 있습니다. 그러나 요소의 너비를 좁힌 다음 회전 할 수 있습니다 .

다음은 jQuery 객체의 요소를 회전하는 간단한 jQuery 스 니펫입니다. 회전을 시작하고 중지 할 수 있습니다.

$(function() {
    var $elie = $(selectorForElementsToRotate);
    rotate(0);
    function rotate(degree) {

          // For webkit browsers: e.g. Chrome
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
          // For Mozilla browser: e.g. Firefox
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

          // Animate rotation with a recursive call
        setTimeout(function() { rotate(++degree); },5);
    }
});

jsFiddle 예제

참고 :
각도를 가져와 높이면 이미지가 시계 방향으로 회전합니다. 회전 각도를 줄이면 이미지가 시계 반대 방향으로 회전합니다 .

---

그래, 당신은 내가 생각하기에 많은 운이 없을 것입니다. 일반적으로 주요 브라우저가 사용하는 3 가지 그리기 방법 (Canvas, SVG, VML)에서 텍스트 지원이 좋지 않습니다. 이미지를 회전하고 싶다면 모든 것이 좋지만 서식과 스타일이 혼합 된 콘텐츠가 있다면 아마도 그렇지 않을 것입니다.

브라우저 간 그리기 API에 대해서는 RaphaelJS 를 확인하십시오 .

---

모든 요소에 대해 브라우저 간 회전. IE7 및 IE8에서 작동합니다. IE7에서는 JSFiddle에서 작동하지 않는 것처럼 보이지만 내 프로젝트에서는 IE7에서도 작동했습니다.

http://jsfiddle.net/RgX86/24/

var elementToRotate = $('#rotateMe');
var degreeOfRotation = 33;

var deg = degreeOfRotation;
var deg2radians = Math.PI * 2 / 360;
var rad = deg * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);

var m11 = costheta;
var m12 = -sintheta;
var m21 = sintheta;
var m22 = costheta;
var matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
    .css('-moz-transform','rotate('+deg+'deg)')
    .css('-ms-transform','rotate('+deg+'deg)')
    .css('transform','rotate('+deg+'deg)')
    .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
    .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');

편집 13/09/13 15:00 멋지고 쉽고 체인 가능한 jquery 플러그인으로 래핑되었습니다.

사용 예

$.fn.rotateElement = function(angle) {
    var elementToRotate = this,
        deg = angle,
        deg2radians = Math.PI * 2 / 360,
        rad = deg * deg2radians ,
        costheta = Math.cos(rad),
        sintheta = Math.sin(rad),

        m11 = costheta,
        m12 = -sintheta,
        m21 = sintheta,
        m22 = costheta,
        matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;

    elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
        .css('-moz-transform','rotate('+deg+'deg)')
        .css('-ms-transform','rotate('+deg+'deg)')
        .css('transform','rotate('+deg+'deg)')
        .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
        .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');
    return elementToRotate;
}

$element.rotateElement(15);

JSFiddle : http://jsfiddle.net/RgX86/175/

---

다음은 도움이되는 두 가지 jQuery 패치입니다 (이 글을 읽을 때 이미 jQuery에 포함되어있을 수 있음).

• '변환'을 지원하도록 jQuery css () 메서드 패치
• jQuery 패치 : CSS 회전 및 크기 조정 애니메이션

---

DOM / CSS를 사용하여 요소를 회전 할 수 있는지 의심됩니다. 가장 좋은 방법은 캔버스로 렌더링하고 회전하는 것입니다 (세부 사항은 확실하지 않음).

---

편집 : 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 함수로 만드는 코드가 추가되었습니다.

For those of you who don't want to read any further, here you go. For more details and examples, read on. jsFiddle Demo.

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

---

EDIT: One of the comments on this post mentioned jQuery Multirotation. This plugin for jQuery essentially performs the above function with support for IE8. It may be worth using if you want maximum compatibility or more options. But for minimal overhead, I suggest the above function. It will work IE9+, Chrome, Firefox, Opera, and many others.

---

Bobby... This is for the people who actually want to do it in the javascript. This may be required for rotating on a javascript callback.

Here is a jsFiddle.

If you would like to rotate at custom intervals, you can use jQuery to manually set the css instead of adding a class. Like this! I have included both jQuery options at the bottom of the answer.

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

Make sure these are wrapped in $(document).ready

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

Custom intervals

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

---

I put together an animated rotate code program.. you can get your code here ... (if not to late)

http://99mission.why3s.tw/rotatetest.html

참고URL : https://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery