خاصية التحول CSS

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

 

تعريف

css.tag
{

    transform://do something;
}

في الواقع ، يعد تنفيذ التحويل أمرًا سهلاً للغاية في CSS ويظهر بناء الجملة هذا عملية استدعاء وظيفة التحويل للقيام بشيء ما.

 

أنواع خاصية التحول CSS

ينقسم التحويل في CSS إلى:

  • التدوير: هو عملية تدوير العناصر داخل HTML بغض النظر عن محتواها على الإطلاق.
  • الانحراف: انحراف العناصر بقيمة إحداثي س أو ص.
  • التحجيم: قم بتغيير حجم العناصر ليكون أكبر أو أصغر.

 

فوائدها

ستمكننا وظيفة التحويل في css من توفير الوقت للقيام بمهام التحويل السريع. عند استخدام الرسوم المتحركة لـ CSS ، ستكون قد وفرت الوقت باستخدام JavaScript ، على سبيل المثال ، وهذه إحدى ميزات CSS.

 

مثال

من فضلك ، لفهم تحويل CSS جيدًا ، انسخ الرموز التالية في ملف نصي ولا تنس تغيير امتداده إلى .html ثم تشغيله في متصفحك.

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>2D Transform types in CSS</title>
        <style>

        #rot
{
    background-color:#D9D9D9;
    padding:10px;
    border:1px solid #11A8A0;
    font-family:Arial , Tahoma;
    width:300px;
    margin:100px auto;
    text-align:center;
    transform:rotate(-30deg);

}


#sk
{
    background-color:#DD3135;
    padding:10px;
    border:1px solid #11A8A0;
    font-family:Arial , Tahoma;
    width:300px;
    margin:100px auto;
    text-align:center;
    transform:skewY(20deg);

}

#scale
{
    background-color:#806565;
    padding:10px;
    border:1px solid #11A8A0;
    font-family:Arial , Tahoma;
    width:300px;
    margin:100px auto;
    text-align:center;
    transform:scaleX(1.5);

}
        </style>
    </head>

    <body>
        <div>
            <h3 id = "rot">This is rotation</h3>
            <h3 id = "sk">This is skew</h3>
            <h3 id = "scale">This is scale</h3>
        </div>
    </body>

</html>

 

 

 

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *