مرحبا

سنقوم اليوم باستخدام كود الـ CSS مع الـ HTML  بالطبع لنحرك شكل معين عن طريق المنظور و الـ transform

اولا : سنقوم بوضع اساس الصفحة وهو الـ HTML

ما كتبته هنا هو وضعت ثلاث div كل منها سيمثل مربع واعطيتها نفس الخصائص بال Css و لكل منها خصائص منفصلة ايضآ

من خلال كتابة box ستكون كل الخصائص متشابهة و b1 , b2 , b3 ستكون الخصائص منفصلة

والآن نكتب ال Css الخاص بنا لنعطي الخصائص العامة في البداية ليتكون لدينا الشكل ثم نحرك بعدها

ما كتبته الآن بالـ Css هو اعطاء الاشكال المربعة للـ div و ترتيبه بوسط الصفحة

الآن لنكتب كود الحركة للمربعات و نشرح بعدها ما كتبناه ايضآ نضيف لملف الـ Css ما يلي

لنشرح مثلآ المربع الاول و هو يحمل كلاس b1. في البداية كتبت له transform-origin وفائدته هو تحديد من اي مكان

ستقوم الحركة بما معنى من اين ستكون نقطة الحركة يمكن تحديدها عن طريق البكسل او النسبة المؤية او الكتابة مثلا

اعطيته نقطة الحركة هي left center حددت له نقطة انطلاق الحركة من منتصف اليسار

وبعدها ساكتب له امر الحركة عن طريق مرور الماوس عليه عن طريق b1:hover. و ساكتب له transform والترانسفورم

هي المسؤولة عن الحركة بالـ Css3 وحددت له ان يحرك لي المنظور عن طريق الـ perspective وحددت له قيمته بالبكسل

و ان يحرك بصورة دائرية للمحور Y عن طريق rotatey وايضا حددت له قيمته عن طريق الزاوية

واخيرا هو الشفافية قللتها الى 0.8 عن طريق الـ opacity و على نفس المبدأ استعملت على .b2 مع ملاحظة تغير مكان

الـ transform-origin و مراعاة المحور الزاوية بالحركة الدائرية

والملاحظة الاخيرة هي transition وهذا الكود مسؤول عن جعل الحركة انسيابية وتحدد له انسيابية الحركة بالثواني مثلا

انا حددت له الحركة تكون ب0.4 ثانية

النتيجة النهائية مع كل الكودات المستخدمة

See the Pen css perspective transform by Hassaan ALalosy (@HassaanALalosy) on CodePen.

ان شاء الله ساقوم بالتركيز على دروس و معلومات حول الويب الفترة القادمة

اذا احببتم الموضوع يمكنكم مشاركته ^_^