jQuery에서 Div 요소 회전

jQuery에서 Div 요소 회전

div 요소를 회전하는 중...이것은 DOM 신성모독일 수 있습니다. 캔버스 요소와 함께 사용할 수 있을까요?잘 모르겠어요. 이게 어떻게 작동되는지, 왜 작동하지 않는지 아는 사람이 있다면 알고 싶어요.감사해요.

하려면 DIV를 합니다.WebkitTransform / -moz-transform: rotate(Xdeg)

IE에서는 동작하지 않습니다.라파엘 라이브러리는 IE와 연동하여 순환합니다.사용법은 다음과 같습니다.canvas

회전을 활성화하려면 재귀적 기능을 사용할 수 있습니다.

jQuery's로 스핀의 일부를 할 수도 있습니다.

요소의 너비를 고려해야 합니다.표시 내용보다 넓은 폭을 가진 를 회전시키면 재미있는 결과가 나타납니다.그러나 요소의 폭을 좁힌 다음 회전할 수 있습니다.

다음은 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용 JS.

크로스 브라우저는 임의의 요소에 대해 회전합니다.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 회전 및 스케일 애니메이트

편집: 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 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);
});

---

편집: 이 게시물의 댓글 중 하나에 jQuery Multirotation이 언급되어 있습니다.jQuery용 이 플러그인은 기본적으로 IE8을 지원하며 위의 기능을 수행합니다.최대 호환성 또는 더 많은 옵션을 원하는 경우 사용할 수 있습니다.그러나 최소한의 오버헤드를 위해 위의 기능을 권장합니다.IE9+, Chrome, Firefox, Opera 및 기타 많은 기능이 작동합니다.

---

바비...Javascript에서 실제로 하고 싶은 사람을 위한 것입니다.이는 Javascript 콜백에서 회전할 때 필요할 수 있습니다.

여기 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+ */
}

j쿼리

반드시 $(문서)로 포장해 주세요.준비가 되어 있습니다!

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

DOM/CSS를 사용하여 요소를 회전시킬 수 있을지 의문입니다.캔버스에 렌더링하여 회전하는 것이 가장 좋습니다(구체적인 내용은 잘 모르겠습니다).

로테이션 코드 프로그램을 만들었어요여기서 코드를 얻을 수 있습니다.(늦지 않으면)

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

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