في هذا المنشور، سنتعرف على كيفية إنشاء رسوم متحركة أنيقة لبطاقة الوجه ثلاثية الأبعاد باستخدام HTML وCSS مع خلفيات متدرجة.

زيارة موقع الويب الخاص بي

فهم الهيكل

سنستخدم وجهين للبطاقة - الأمامي والخلفي - لإنشاء تأثير التقليب. سيتم تفعيل هذا التأثير عند التمرير باستخدام انتقالات CSS.

    

      
Front Side
    
    

      
Back Side
    

يحتوي هيكل HTML البسيط هذا على عنصر div بجانبين: أحدهما للواجهة الأمامية والآخر للخلفية.

.card {
    perspective: 150rem;
    position: relative;
    height: 40rem;
    max-width: 400px;
    margin: 2rem;
    box-shadow: none;
    background: none;
  }

.card-side {
    height: 35rem;
    border-radius: 15px;
    transition: all 0.8s ease;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    padding: 2rem;
    color: white;
}

.card-side.back {
    transform: rotateY(-180deg);
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%,#FFCC70 100%);
}

.card-side.front {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.card:hover .card-side.front {
    transform: rotateY(180deg);
}

.card:hover .card-side.back {
    transform: rotateY(0deg);
}

العرض التجريبي المباشر

backface-visibility: إخفاء المحتوى الموجود على الجزء الخلفي من البطاقة عندما يكون الجزء الأمامي مرئيًا، والعكس صحيح.

اضبط RotateY() للجانب الخلفي من البطاقة على -180 درجة والجانب الأمامي على 0 درجة.

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

عند التمرير، اضبط RotateY() للجانب الأمامي على 180 درجة والجانب الخلفي على 0 درجة.

خاتمة

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