تحويل CSS3 عند النقر باستخدام Pure CSS

في محاولة لتحسين تفاعل المستخدم، قد تواجه الحاجة إلى تحويل عنصر عند النقر باستخدام CSS3. على وجه التحديد، يعد تدوير الصورة لإنشاء رمز متقاطع مهمة شائعة. على الرغم من أن التمرير هو مشغل شائع للتحويل، إلا أن هذه المقالة تستكشف إمكانية استخدام حدث onClick حصريًا من خلال CSS.

في البداية، يستخدم الكود المقدم حدث التمرير لتدوير الصورة بمقدار 45 درجة. ومع ذلك، لبدء التحويل عند النقر، يلزم إجراء تعديل.

تحويل الحالة النشطة

يقدم CSS الفئة الزائفة :active التي تم تصميمها لتصميم العناصر عند النقر عليها. من خلال الاستفادة من هذه الفئة الزائفة، يمكنك تحقيق السلوك المطلوب:

.crossRotate:active {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

سيؤدي هذا الرمز إلى تدوير الصورة بمقدار 45 درجة عند النقر عليها. ومع ذلك، من المهم ملاحظة أن التحويل سيختفي بمجرد تحرير النقرة. وذلك لأن الحالة:active تكون نشطة فقط أثناء النقر نفسه.

الحفاظ على التحويل باستخدام JavaScript

إذا كنت تريد أن يستمر التحويل بعد النقر، فستحتاج إلى استخدام JavaScript. من خلال التقاط حدث النقر باستخدام jQuery، يمكنك تبديل التحويل باستخدام طريقة css():

$( ".crossRotate" ).click(function() {
  if (  $( this ).css( "transform" ) == 'none' ){
    $(this).css("transform","rotate(45deg)");
  } else {
    $(this).css("transform","" );
  }
});

في هذا الكود، يتم التحقق من خاصية التحويل. إذا تم تعيينه على لا شيء، فسيتم تطبيق التحويل، وإلا فسيتم إزالته. يتيح لك هذا تشغيل وإيقاف تشغيل الرمز المتقاطع مع كل نقرة.

من خلال استخدام هذه التقنيات، يمكنك تدوير الصورة بشكل فعال باستخدام تحويل CSS3 عند النقر، سواء باستخدام JavaScript أو بدونه للحفاظ على التحويل بعد النقر. حدث.