ویژگی perspective در CSS برای ایجاد جلوه‌های سه‌بعدی (3D) در صفحات وب استفاده می‌شود.

این ویژگی باعث می‌شود عناصر هنگام اعمال transform‌های سه‌بعدی مانند rotateX(), rotateY(), و translateZ() به شکلی طبیعی‌تر و واقعی‌تر نمایش داده شوند.

در این مقاله، نحوه کارکرد perspective، نحوه اعمال آن و مثال‌های کاربردی را بررسی خواهیم کرد.

۱. ویژگی perspective چیست؟

ویژگی perspective مشخص می‌کند که یک عنصر از چه فاصله‌ای نسبت به بیننده دیده می‌شود. هرچه مقدار perspective بزرگ‌تر باشد، عمق سه‌بعدی کمتر احساس می‌شود و برعکس.

نحوه تعریف perspective در CSS

.parent {
    perspective: 500px;
}

✅ مقدار ۵۰۰px به این معناست که نقطه دید ناظر ۵۰۰ پیکسل از صفحه فاصله دارد.

💡 مقدار کوچک‌تر از ۵۰۰px باعث می‌شود که عمق تصویر بیشتر احساس شود و تغییرات سه‌بعدی شدیدتر دیده شوند.

۲. نحوه اعمال perspective روی عناصر سه‌بعدی

ویژگی perspective معمولاً روی والد (parent) عنصر اعمال می‌شود تا تأثیر آن روی فرزندانش مشخص شود.

مثال: اعمال perspective روی یک عنصر

.parent {
    perspective: 800px;
}

.box {
    width: 100px;
    height: 100px;
    background: red;
    transform: rotateY(30deg);
}

✅ در این مثال:

عنصر .box ۳۰ درجه حول محور Y می‌چرخد.
perspective: 800px; عمق دید را مشخص می‌کند و باعث می‌شود که چرخش به‌صورت سه‌بعدی نمایش داده شود.

۳. تفاوت مقدار perspective

مقدار perspective تأثیر زیادی بر روی جلوه‌های سه‌بعدی دارد.

مقدار perspective	تأثیر آن
`200px`	جلوه‌ی سه‌بعدی بسیار قوی و نمایشی
`500px`	تعادل بین عمق و واقعی بودن
`1000px`	جلوه‌ی سه‌بعدی کم‌تر و نزدیک به دوبعدی

مثال: تفاوت مقدار perspective

.parent {
    perspective: 200px; /* یا 500px، 1000px */
}

✅ مقدار کوچکتر (200px) باعث افزایش عمق تصویر می‌شود.
✅ مقدار بزرگ‌تر (1000px) باعث کاهش تأثیر عمق و ایجاد نمایی ملایم‌تر می‌شود.

۴. استفاده از transform-style برای تأثیر بیشتر

برای اعمال صحیح perspective، باید ویژگی transform-style را روی preserve-3d تنظیم کنیم.

.parent {
    perspective: 600px;
    transform-style: preserve-3d;
}

✅ این ویژگی به مرورگر می‌گوید که فرزندان این عنصر باید در فضای سه‌بعدی باقی بمانند.

۵. ترکیب perspective با transform‌های سه‌بعدی

مثال: چرخش سه‌بعدی حول محور X و Y با perspective

.parent {
    perspective: 700px;
}

.box {
    width: 150px;
    height: 150px;
    background: blue;
    transform: rotateX(45deg) rotateY(30deg);
}

✅ این کد باعث می‌شود که عنصر .box به‌صورت سه‌بعدی حول دو محور X و Y چرخش کند.

۶. استفاده از perspective-origin

ویژگی perspective-origin مشخص می‌کند که نقطه دید ناظر در چه مکانی از صفحه قرار دارد.

مثال: تغییر نقطه دید با perspective-origin

.parent {
    perspective: 600px;
    perspective-origin: left top;
}

✅ این مقدار باعث می‌شود که بیننده از بالا و چپ صفحه به عنصر نگاه کند.

🔹 مقدارهای قابل قبول:

perspective-origin: center center; (پیش‌فرض)
perspective-origin: top left;
perspective-origin: bottom right;
perspective-origin: 50% 50%;

۷. ایجاد انیمیشن با perspective

با ترکیب perspective و animation می‌توان جلوه‌های متحرک جذابی ایجاد کرد.

مثال: انیمیشن چرخش سه‌بعدی

@keyframes rotate3D {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

.parent {
    perspective: 800px;
}

.box {
    width: 100px;
    height: 100px;
    background: green;
    animation: rotate3D 3s linear infinite;
}

✅ این کد باعث چرخش بی‌نهایت عنصر در محور Y می‌شود و perspective باعث نمایش بهتر افکت سه‌بعدی خواهد شد.

۸. جمع‌بندی

✔ perspective برای ایجاد عمق و جلوه‌های سه‌بعدی در CSS استفاده می‌شود.
✔ مقدار کوچکتر perspective باعث افزایش عمق تصویر و مقدار بزرگ‌تر باعث ملایم‌تر شدن افکت می‌شود.
✔ ویژگی perspective معمولاً روی والد عنصر تنظیم می‌شود.
✔ ترکیب perspective با rotateX(), rotateY(), و translateZ() جلوه‌های سه‌بعدی واقعی‌تری ایجاد می‌کند.
✔ برای نمایش صحیح، باید از transform-style: preserve-3d; استفاده کرد.
✔ با perspective-origin می‌توان زاویه دید ناظر را تغییر داد.
✔ perspective در انیمیشن‌های CSS نیز برای ایجاد افکت‌های حرفه‌ای کاربرد دارد.