كيفية القياس والترجمة ثلاثية الأبعاد في نفس الوقت؟

Question

خذ هذا المثال:

@-webkit-keyframes slideInViewport {
    from{
        -webkit-transform: scale(1);
        -webkit-transform: translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: scale(0.8);
        -webkit-transform: translate3d(250px, 0, 0)
    }
}

يؤدي هذا إلى ترجمة div أولاً بمقدار 250 بكسل إلى اليسار ثم تغيير الحجم.كيف يمكنني جعلها تترجم ثلاثية الأبعاد في نفس الوقت الذي يتم فيه التوسع؟

لقد حققت هذا الرسوم المتحركة على left الملكية، ولكن ذلك يؤدي إلى أداء ضعيف للغاية.

Answer 1

الحل هو:ضعهم جميعًا في سطر واحد.

@-webkit-keyframes slideInViewport {
    from{
        -webkit-transform: scale(1) translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: scale(0.8) translate3d(250px, 0, 0);
    }
}