خصائص التحول : استخدام transform perspective في CSS

تحدثنا عن المصفوفة في استخدامات متعددة ، وشرحنا التكبير والتصغير والانحراف والتدوير دون استخدام البعد الثالث ، والذي سنشرح في هذا الدرس ، كيف يتم استخدام المنظور ، وهي خدعة بسيطة في أبعاد الشاشة يتم الإستناد إليها في لغات الويب.

لا تتصف هذه الخاصية بالتعقيد مقارنة مع اللغات المنخفضة ولكنها تقوم باستخدام توصيف معد مسبقًا في لغة CSS.

 

تعريف

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

في هذا الدرس ، سوف نلعب قليلاً مع إحداثيات z-deep ونطبق هذا المفهوم في CSS. إنه سهل للغاية على النحو التالي:

transform:translateZ(degree value);

لتمكين المنظور ثلاثي الأبعاد ، يجب علينا وضع قيمة في علامة html الخاصة بجسمنا على النحو التالي:

body{
    perspective:100px;
}

 

فوائد خصائص التحول

من أهم فوائد استخدام البعد الثالث في لغة CSS لدينا:

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

 

مثال

من فضلك ، لفهم تحويل CSS 3d جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

body{
    perspective:100px;
}

.parent{
    width:300px;
    height:300px;
    margin:30px auto;
    position:relative;
    background-color:#E8E8E8;
    transition:all .8s ease-in-out;
    transform:rotateY(20deg);
    transform-style:preserve-3d;
}

.child{
    width:300px;
    height:300px;
    position:absolute;
    left:30px;
    top:30px;
    background-color:#D9D9D9;
    transform:translateZ(50px) transform:rotateY(45deg);
}



 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>3D Transform - Transform Origin, Style</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class = "parent">

            <div class="child"></div>

        </div>

    </body>

</html>