كيفية إنشاء 3D فليب الرسوم المتحركة مع المغلق

s على بعضها البعض ، وجهان للوجه الأمامي والخلفي للزر ، وواحد ثالث لملء العمق في المنتصف. نضع وجوه ثلاثة زر في .flipBtn الحاوية التي ستعمل كزر 3D ، ونحن نضع زر 3D في .flipBtnWrapper غلاف.

2. إضافة الأنماط الأساسية مع CSS

وضعنا عرض و ارتفاع خصائص المجمع ، والزر ، وأوجه الزر ، ووضعها باستخدام تقنية تحديد المواقع النسبية / المطلقة.

 .flipBtnWrapper width: 200px؛ الارتفاع: 200 بكسل ؛ الموقف: نسبي  .flipBtn ، .flipBtn_face width: 100٪؛ الارتفاع: 100 ٪ ؛ الموقف: مطلق ؛  

3. نمط وجوه 3 زر

نضيف صورًا خلفية إلى وجهي الزر الأمامي والخلفي ، ونضع تدرجًا خطيًا رائعًا خلف الصور لكليهما. الحيلة هنا هي أنه في CSS ، يمكنك تعيين صور متعددة كصورة خلفية لنفس العنصر ، ويمكنك أيضًا إعلان التدرجات كصور خلفية.

الوجه الأوسط, .flipBtn_mid, يعطى ارتفاع من 20px ، ويتم إنشاء نفس مساحة 20px بين الوجهين الأمامي والخلفي. نحقق هذا الأخير باستخدام translateZ () وظيفة المغلق ذلك يتحرك عنصر على طول المحور z. ندفع الوجه الخلفي للخلف بمقدار 10 بكسل ، ونعيد الوجه الأمامي للأمام بمقدار 10 بكسل.

 .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png") ، التدرج الخطي (# FF6366 50٪، # FEA56E)؛ الرؤية الخلفية: خفية. تحويل: translateZ (10px) ؛  .flipBtn_back background-image: url ("image / css-3d-flip-button-animation-pause.png") ، التدرج الخطي (# FF6366 50٪، # FEA56E)؛ لون الخلفية: الأزرق. تحويل: translateZ (-10px) ؛  .flipBtn_mid height: 20px؛ لون الخلفية: # d5485a ؛ تحويل: rotateX (90deg) ؛ أعلى: -10 بكسل ؛ 

إلى تغطية الفضاء بين الوجوه الأمامية والخلفية مع الوجه الأوسط ، نحن وضع الوجه الأوسط شقة عبر طائرة إكس الفضاء 3D باستخدام تحويل: rotateX (90deg) ؛ حكم ذلك يجعلها عمودية لكلا الوجهين الأمامي والخلفي على متن الطائرة y.

نظرًا لكون الوجه الأوسط مستويًا على مستوى x ، فإن النقطة العليا على المحور y تنخفض بمقدار 10 بكسل (نصف ارتفاعه) عن الأصل. لذلك ، لسحبه للخلف ومواءمته مع وجهي الزر الآخرين ، أضفت أعلى: -10 بكسل حكم كذلك.

لقد استخدمت backface-الرؤية خاصية CSS للوجه الأمامي ، لذلك عندما نقلب الزر ، لن يكون الجزء الخلفي للوجه الأمامي مرئيًا.

حتى الآن ، سترى فقط الواجهة الأمامية على الشاشة ، حيث يتم إخفاء الطائرة x عن الأنظار ، وعلى الطائرة y (الشاشة) كان الوجه الأخير الذي تم وضعه في المقدمة. عن طريق تدوير الزر سوف تكون قادرًا على رؤية الوجوه الأخرى أيضًا.

4. تدوير الزر

تحدد خاصية CSS بنمط التحويل ما إذا كانت العناصر الفرعية لعنصر HTML يتم عرضها بشكل مسطح أم في موضع ثلاثي الأبعاد. في مقتطف الشفرة أدناه ، تحويل النمط: preserve-3d. حكم يعطي حجم 3D لزرنا ، في حين أن تحويل: rotatexX () الخاصية تدور حول محور س.

 .flipBtn convert-style: preserve-3d؛ تحويل: rotateX (-120deg) ؛  

لاحظ أنني اعتدت -120deg فقط لأغراض العرض التوضيحي ، حيث أنه من السهل توضيح كيفية عمل تدوير الأزرار.

ولكن في الخطوة التالية سوف نقوم بتغييره إلى -180deg لجعل زر الوجه تماما حولها.

5. موحية الزر

في هذه المرحلة ، لا يزال الزر ثلاثي الأبعاد غير متحرك. يمكننا أن نفعل هذا باستخدام انتقال خاصية. نحن نستخدم ال تحول خاصية للقيمة الأولى ، لأن هذه هي الخاصية التي نريد تطبيق تأثير الانتقال عليها. القيمة الثانية ، هي المدة, 2S.

لنجعل الزر يدور فقط عند التمرير ، لذا بدلاً من الزر .flipBtn محدد ، دعونا نستخدم .flipBtnWrapper: hover .flipBtn. كما ذكر سابقا ، أيضا تغيير قيمة rotateX () إلى -180deg لجعل زر الوجه حولها.

 .flipBtn الانتقالية: convert 2s؛ تحويل النمط: preserve-3d.  .flipBtnWrapper: hover .flipBtn convert: rotateX (-180deg)؛ 

لاحظ أنه في جيثب الريبو ، أنا إضافة خانة اختيار لكل زر من أجل إطلاق الرسوم المتحركة على :التحقق بدلا من يوم :يحوم, بهذه الطريقة يتصرف أشبه زر حقيقي. قمت أيضًا بتضمين أربعة أزرار مختلفة مع أربعة اتجاهات قلب (أعلى → أسفل ، أسفل → أعلى ، يمين → يسار ويسار → يمين) ، بحيث يمكنك بسهولة استخدام أيهما تريد.

• عرض تجريبي
• تحميل المصدر