عمل مسننات دوارة بواسطة CSS3 Transformation دون جافاسكربت

مقدمة

لنفرض أن لدينا صورة كالموجودة أدناه ونريد تطبيق بعض التحويلات عليها

التحويلات التي يمكننا تطبيقها عبر transform في CSS3 كثيرة منها التدوير rotate والتحجيم scale والشد skew وأي مصفوفة transformation matrix

طريقة التطبيق

لتدوير الشكل 120 درجة نستعمل كود css التالي

.my_class {
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
-ms-transform:rotate(120deg);
-o-transform:rotate(120deg);
transform:rotate(120deg);
}

لجعله أصغر بنسبة 50% نستخدم scale

.my_class {
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-ms-transform:scale(0.5);
-o-transform:scale(0.5);
transform:scale(0.5);
}

يمكنك إعطاء معامل تكبير لمحور س مختلف عن ص مثلا scale(0.5, 1.5)
يمكن دمج أكثر من تحويل معا هكذا

.my_class {
-webkit-transform:rotate(120deg) scale(0.5);
-mox-transform:rotate(120deg) scale(0.5);
}

وهذا مثال يبين كل شيء

تحريك التحويلات

يمكننا أن نستعمل moz-keyframes أو webkit-keyframes لتطبيق ما تعلمناه في مقالة عمل حركات بواسطة CSS3

@-moz-keyframes ani {
  0% { -moz-transform:rotate(0) scale(1);}
 50% { -moz-transform:rotate(180deg) scale(0.5); }
100% { -moz-transform:rotate(360deg) scale(1); }
}

وهذه هي النتيجة

مثال حي

قمت برفع  المسنن المتحرك على jsfiddle