يقوم CSS3 بتخزين قيم الرسوم المتحركة الحالية

Question

لدي div يقوم بحركة دورانية على هذا النحو:

@-webkit-keyframes animateCamera {
    from {-webkit-transform: translateZ(300px) rotateY(0deg);}
    to {-webkit-transform: translateZ(300px) rotateY(360deg);}}
}

ما أريد أن يحدث هو أنه عندما أقوم بتشغيل حدث (دعنا نقول النقر بالماوس)، أريد تخزين التدوير الحالي في متغير اعتبارًا من الرسم المتحرك.على سبيل المثال، إذا تم تشغيل حدث النقر بينما تكون الرسوم المتحركة عند حوالي 140 درجة، فأنا أريد تخزين 140 درجة في متغير.هل يعرف أحد كيفية إرجاع قيمة RotateY الحالية؟تنكس!

Answer 1

أراهن على وصولك إلى قيمة التدوير الحالية مثل أي قيمة أخرى لـ css.

جافا سكريبت:

Genacodicetagpre

Answer 2

للحصول على أي قيم CSS يمكنك الاتصال بها getComputedStyle طريقة window وتمرير العنصر المتحرك إليها:

var animatedEl = document.getElementById('#myAnimatedEl');
var styles = window.getComputedStyle(animatedEl);
var currentTransform = styles.getPropertyCSSValue('-webkit-transform').cssText;

ال currentTransform سوف يكون مصفوفة التحول والتي تحتاج منها لحساب القيم الخاصة بك.

وهنا أ com.jsfiddle كيف يعمل هذا.