استخدام البطاقات css : طرق استخدام بطاقات CSS

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

 

تعريف

تحتوي بطاقة CSS flip على علامتي HTML داخل علامة رئيسية تديرها عند تمكين ميزة CSS 3D-Perspective ، والتي غالبًا ما تكون هكذا في معظم العلامات:

.MainTag{

}

front tag{

}

back tag{

}

هذه ثلاث علامات رئيسية في جميع البطاقات في CSS تحتوي على:

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

 

فوائد استخدام البطاقات css

استخدام بطاقات العرض في CSS له مزايا عديدة وهي:

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

 

مثال

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

CSS

body{
    perspective:500px;
}


.default{
    width:350px;
    height:300px;
    margin:100px auto;
    position:relative;
    transition: all .8s ease-in-out;
    transform-style:preserve-3d;
}

.default:hover{
    transform: rotateY(180deg);
}

 div{
    position:absolute;
    left:0;
    top:0;
    border-radius:10px;
    width:100%;
    height:100%;
    line-height:300px;
    color:#D9D9D9;
    font-size:40px;
    text-align:center;
}

.front{
    background-color:#38B6FF;
}

.back{
    background-color:#FF5757;
    transform:rotateY(180deg);
}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title> 3D Transform Filp Card CSS</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class = "default">
            <div class="front"> This is front</div>
            <div class="back"><a href="https://tajersys.com">This is back</a></div>
        </div>
    </body>

</html>