تحويل 3d ():استخدام النسبة المئوية للتحرك داخل الكائن الأصل

Question

لدى CSS سلوك قياسي، عند نقل كائن بنسبة مئوية، حيث تمثل هذه النسبة أبعاد الحاوية الأصلية (div).

هذا غير صحيح عند استخدام CSS3 transform: translate3d().في حالة استخدام قيم النسبة المئوية للإحداثيات X أو Y أو Z، فإن النسبة المئوية تمثل أبعاد الكائن الحالي, ، وليس أهله.

يجب أن تكون المشكلة واضحة الآن:إذا كنت بحاجة إلى استخدام الرسوم المتحركة CSS3 و transform: translate3d() لتحريك الكائن الحالي ضمن أبعاد الأصل الذي يمكن تغيير حجمه ديناميكيًا، أنا ببساطة لا أعرف كيفية القيام بذلك.مثال:استخدام translate3d(100%, 0, 0) سيحرك الكائن حسب العرض الفعلي للكائن الحالي، وليس الكتلة التي تحتوي عليه.

هل لديك أي أفكار حول كيفية الحصول على أبعاد متغيرة ديناميكيًا للوالد، من فضلك؟أو كيفية جعل الكائن الحالي يترجم داخل أصله باستخدام الأجهزة المتسارعة translate3d()?

تؤكد شبكة مطوري Mozilla ما يلي: تشير النسب المئوية (في التحولات) إلى حجم المربع المحيط.

هل هناك أي حل بديل من فضلك؟

Answer 1

لا أعتقد أن هناك حلًا لـ CSS فقط.طريقتي هي حساب العلاقة بين عرض عنصر الالتفاف وعرض الطفل باستخدام JavaScript قبل ضربه بقيمة X المستهدفة:

var transform = "translate3d(" + translateX * (wrapperCompWidth / innerCompWidth) + "%,0,0)";

إليك مثال عملي لما أعنيه: http://jsfiddle.net/Whre/7qhnA/2/

Answer 2

لسوء الحظ، هذا غير ممكن مع CSS خالص إلا إذا كنت على استعداد لاستخدام وحدات إطار العرض - وحتى ذلك الحين، سيكون هناك بعض الحسابات الانتقائية للعرض الأصلي إذا كان مختلفًا عن عرض إطار العرض.بالنسبة إلى النسبة المئوية للأبعاد الأصلية، ستحتاج إلى استخدام Javascript.

إليك مثال JS بسيط. http://cssdeck.com/labs/bus53o22

Answer 3

@Bunkai.Satori للقيام بذلك في CSS خالص، ما عليك سوى وضع هذا العنصر في حاوية جديدة تتطابق مع العرض والارتفاع الأصليين، ثم استخدم Transform3d() في الحاوية الجديدة.

Answer 4

لاستخدام المحور Z بدون قيم ثابتة، استخدم:

transform: rotateY(90deg) translateX(-50%) rotateY(-90deg);

يقوم بتدوير الكائن قبل التحرك، ثم تدويره مرة أخرى لتطبيع الوضع.تم اختباره في جوجل كروم.