如何在除0以外的底角上執行旋轉動畫？

Question

在JS中，我有一些轉換代碼可以旋轉三個精靈的頭部，使其跟隨屏幕上的光標。 此外，我還制作了CSS關鍵幀動畫，以使您“搖搖欲墜”。 我的問題是，此動畫使用的似乎是0deg的基准，我希望它改用鼠標當前角度作為中心。

我在JS中將此值設置為angle1 ，但在CSS中卻沒有。 有沒有辦法在CSS中使用這個角度？ 因此，相反，我的動畫將執行類似transform的操作： rotate(baseAngle + 90)等？ 有關SC，請參見下文。

我也覺得這種行為的gif在這里非常有價值： https : //gyazo.com/90855776c7803c63b72d378cb4a3c194

跟蹤鼠標移動的JS：

(function() {
    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        var scrollMaxY, dot, eventDoc, doc, body, pageX, pageY;

        // IE-isms
        event = event || window.event;
        maxY = window.innerHeight || (document.documentElement.innerHeight - document.documentElement.clientHeight)

        // If pageX/Y aren't available and clientX/Y are,
        if (event.pageX == null && event.clientX != null) {
            eventDoc = (event.target && event.target.ownerDocument) || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;

            event.pageX = event.clientX +
              (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
              (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY +
              (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
              (doc && doc.clientTop  || body && body.clientTop  || 0 );
        }

        // TODO: Use x/y values to rotate heads
        angle1 = Math.atan2( event.pageY - head1[0], event.pageX - head1[1]);
        angle2 = Math.atan2( event.pageY - head2[0], event.pageX - head2[1]);
        angle3 = Math.atan2( event.pageY - head3[0], event.pageX - head3[1]);
        $("#kodama-head1").css("transform", "rotate(" + angle1 + "rad)");
        $("#kodama-head2").css("transform", "rotate(" + angle2 + "rad)");
        $("#kodama-head3").css("transform", "rotate(" + angle3 + "rad)");
    }
})();

我的CSS關鍵幀動畫：

@keyframes RattleHeads {
    0% {
        transform: rotate(90deg);
        -webkit-transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
        transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    55% {
        transform: rotate(-60deg);
    }
    69% {
        transform: rotate(45deg);
    }
    78% {
        transform: rotate(-30deg);
    }
    85% {
        transform: rotate(20deg);
    }
    91% {
        transform: rotate(-15deg);
    }
    95% {
        transform: rotate(10deg);
    }
    98% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

最后，JS用於應用嘎嘎作響的動畫：

$("body").click(function(){
    var KodamaHead;
    var random = Math.random() * 3;
    if (random > 2){
        KodamaHead = $("#kodama-head3");        
    }
    else if (random > 1){
        KodamaHead = $("#kodama-head2");
    }
    else{
        KodamaHead = $("#kodama-head1");
    }
    // add animation
    KodamaHead.addClass("rattling");
    // remove animation on completion
    KodamaHead.one("webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend",   
    function(e) {
        $(this).removeClass("rattling");
    });
});

Answer 1

只需將head元素包裹在另一個元素中即可。
內部元素的變換現在將相對於包裝器之一。

在以下示例中，我們將鼠標驅動的旋轉應用於內部的.head元素，而將CSS驅動的旋轉（onclick）應用於.wrapper元素。
由於這里兩者共享相同的transform-origin，因此也可以采用其他方法。

 $("body").click(function() { var random = Math.floor(Math.random() * 3); // Target one of the `.wrapper` elements var KodamaHead = $('.persona .wrapper').eq(random); // add animation KodamaHead.addClass("rattling"); // remove animation on completion KodamaHead.one("webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend", function(e) { $(this).removeClass("rattling"); }); }); (function() { // get Elements rotation anchor var head1 = getAnchor('#kodama-head1'); var head2 = getAnchor('#kodama-head2'); var head3 = getAnchor('#kodama-head3'); document.onmousemove = handleMouseMove; function handleMouseMove(event) { // removed some backward compatibility fluffs // feel free to add it back // calculations were off by half a π angle1 = Math.atan2(event.pageY - head1[0], event.pageX - head1[1]) - Math.PI / 2; angle2 = Math.atan2(event.pageY - head2[0], event.pageX - head2[1]) - Math.PI / 2; angle3 = Math.atan2(event.pageY - head3[0], event.pageX - head3[1]) - Math.PI / 2; $("#kodama-head1").css("transform", "rotate(" + angle1 + "rad)"); $("#kodama-head2").css("transform", "rotate(" + angle2 + "rad)"); $("#kodama-head3").css("transform", "rotate(" + angle3 + "rad)"); } })(); // get anchor position (center, center) function getAnchor(sel) { var el = document.querySelector(sel), rect = el.getBoundingClientRect(); return [rect.top + rect.height / 2, rect.left + rect.width / 2]; } 

 .rattling { animation: RattleHeads 2s linear; } .persona { display: inline-block; height: 90vh; width: 20vw; border: 1px solid; } .head { display: inline-block; height: 20vw; width: 20vw; border: 1px solid; position: relative; } .head::before, .head::after { content: '•'; color: white; font-size: 18px; line-height: 12px; width: 2vmax; height: 2vmin; position: absolute; top: 5vw; left: 7vw; background: black; border-radius: 20%; } .head::after { left: auto; right: 7vw; } @keyframes RattleHeads { 0% { transform: rotate(0deg); } 55% { transform: rotate(-60deg); } 69% { transform: rotate(45deg); } 78% { transform: rotate(-30deg); } 85% { transform: rotate(20deg); } 91% { transform: rotate(-15deg); } 95% { transform: rotate(10deg); } 98% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="persona"> <div class="wrapper"><!-- rattling --> <div id="kodama-head1" class="head"><!-- look-at --> </div> </div> </div> <div class="persona"> <div class="wrapper"><!-- rattling --> <div id="kodama-head2" class="head"><!-- look-at --> </div> </div> </div> <div class="persona"> <div class="wrapper"><!-- rattling --> <div id="kodama-head3" class="head"><!-- look-at --> </div> </div> </div>