با استفاده از CSS یک کارت تعاملی بسازید که هنگام قرار گرفتن موس روی آن با چرخش سه‌بعدی حول محور Y پشت کارت را نمایش دهد (flip) و از قابلیت‌هایی مثل perspective، transform-style: preserve-3d و backface-visibility استفاده کند.

برای حل، یک ساختار ساده HTML با یک کانتینر (مثلاً .scene) و یک عنصر کارت شامل دو وجه جلویی و پشتی بسازید؛ به کانتینر مقدار perspective بدهید، به کارت transform-style: preserve-3d و transition اعمال کنید و در حالت hover کارت را با transform: rotateY(180deg) بچرخانید. برای هر وجه از position: absolute و backface-visibility: hidden استفاده کنید و وجه پشتی را با rotateY(180deg) بچرخانید تا هنگام چرخش پشت آن دیده شود. نکات: مقدار perspective را تنظیم کنید تا عمق مناسب دیده شود، از translateZ برای افزایش حس عمق استفاده کنید و برای عملکرد بهتر از will-change یا transition مناسب بهره بگیرید؛ این پیاده‌سازی را می‌توانید تنها با CSS و بدون JavaScript انجام دهید.