حس عمق در رابط کاربری لزوماً به Three.js یا WebGL نیاز ندارد. با ترکیب perspective روی والد و transform سهبعدی روی فرزندان، میتوان لایهبندی قانعکنندهای ساخت که هم سبک است و هم بهراحتی در دسترسپذیری و عملکرد صفحه اختلالی ایجاد نمیکند.
دو ویژگی کلیدی
نکتهی کلیدی، استفاده از preserve-3d روی عنصر والد و translateZ روی فرزندان برای ایجاد فاصلهی واقعی بین لایههاست، نه فقط شبیهسازی آن با سایه. وقتی preserve-3d فعال باشد، مرورگر واقعاً فرزندان را در فضای سهبعدی محاسبه میکند، نه اینکه فقط ظاهر آنها را دستکاری کند.
ویژگی دوم، perspective است که باید روی والد (نه خود عنصر متحرک) تنظیم شود. مقدار کمتر perspective، عمق بیشتری ایجاد میکند؛ اما مقدار خیلی کم هم باعث اعوجاج بیش از حد و غیرواقعی شدن جلوه میشود. برای اغلب موارد، مقداری بین ۸۰۰ تا ۱۶۰۰ پیکسل نتیجهی طبیعی میدهد.
تعامل با ماوس، بدون افراط
برای تعامل، گوشدادن به موقعیت ماوس و چرخاندن ملایم عنصر با rotateX/rotateY، بدون افراط، حسی پریمیوم و ظریف ایجاد میکند. زاویهی چرخش بهتر است به چند درجه محدود شود؛ چرخش بیش از حد، بهجای حس ظرافت، حس بیثباتی به رابط کاربری میدهد.
«عمق واقعی از لایهبندی درست میآید، نه از سایهی تیرهتر.»
نکتهی عملکردی مهم
یک نکتهی مهم برای عملکرد: از will-change روی عنصر متحرک استفاده کنید تا مرورگر از قبل لایهی گرافیکی جداگانهای برای آن آماده کند؛ اما از استفادهی بیش از حد آن روی المانهای زیاد خودداری کنید، چون خودش میتواند حافظهی گرافیکی زیادی مصرف کند.
همچنین همیشه prefers-reduced-motion را در نظر بگیرید؛ برخی کاربران به دلایل پزشکی یا شخصی ترجیح میدهند حرکت کمتری در رابط کاربری ببینند.