كيفية القياس والترجمة ثلاثية الأبعاد في نفس الوقت؟
سؤال
خذ هذا المثال:
@-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
الملكية، ولكن ذلك يؤدي إلى أداء ضعيف للغاية.
المحلول
الحل هو:ضعهم جميعًا في سطر واحد.
@-webkit-keyframes slideInViewport {
from{
-webkit-transform: scale(1) translate3d(0, 0, 0);
}
to{
-webkit-transform: scale(0.8) translate3d(250px, 0, 0);
}
}
لا تنتمي إلى StackOverflow