تبدیلات سه‌بعدی (3D Transforms)

آشنایی با transform سه‌بعدی: rotateX، rotateY، perspective و افکت‌های فضایی

تبدیلات سه‌بعدی در CSS

CSS اجازه می‌دهد عناصر را در فضای سه‌بعدی دستکاری کنید — چرخش حول محور X، Y و Z.

توابع ۳D

تابعتوضیح
rotateX()چرخش حول محور X (افقی)
rotateY()چرخش حول محور Y (عمودی)
rotateZ()چرخش حول محور Z (عمق)
perspective()عمق و پرسپکتیو
translate3d()جابه‌جایی سه‌بعدی
scale3d()بزرگنمایی سه‌بعدی

perspective (پرسپکتیو)

برای افکت سه‌بعدی، نیاز به perspective داریم:

.scene {
        perspective: 1000px;  /* هرچه کمتر، نزدیک‌تر */
    }
    
    .card {
        transform: rotateY(45deg);
    }

flip card (کارت برگردان)

.flip-card {
        perspective: 1000px;
    }
    
    .flip-inner {
        transform-style: preserve-3d;
        transition: transform 0.6s;
    }
    
    .flip-card:hover .flip-inner {
        transform: rotateY(180deg);
    }
    
    .flip-front, .flip-back {
        position: absolute;
        backface-visibility: hidden;
    }
    
    .flip-back {
        transform: rotateY(180deg);
    }

transform-style

مقدارتوضیح
flatتخت (پیش‌فرض)
preserve-3dحفظ فضای سه‌بعدی ⭐

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط