الكلاس 'bottom'

الدرس 18 من 31 في دورة بطاقة 3D | مشروع Front-end على Coddy.

التحدي

سهل

استهدف الفئة ‘bottom’:

قم بضبط display على Flex
قم بضبط align-items على center.
قم بضبط justify-content على space-between
قم بضبط position على absolute
قم بضبط bottom، و left، و right على 20 بكسل.
قم بضبط padding بمقدار 10px من الأعلى والأسفل و 12px من اليمين واليسار

أضف هذه الخصائص في النهاية للحصول على لمسة نهائية دقيقة:

transform-style: preserve-3d;
transform: translate3d(0, 0, 26px);

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

الكلاس 'bottom'

جميع دروس بطاقة 3D | مشروع Front-end