dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
TW Toate comenzile Tailwind CSS

Transformări 3D și Perspectivă în Tailwind CSS: rotate-x, rotate-y și perspective în Tailwind CSS

Transformări și 3D Tailwind CSS v4 Q&A / Distribuie cod

Ghid complet pentru transformări 3D în Tailwind: aplicarea perspective-(valoare), rotații pe axele X și Y (rotate-x-*, rotate-y-*) și crearea cardurilor cu întoarcere 3D (Flip Card).

Sintaxă 
class="perspective-1000 hover:rotate-y-180 transform-style-3d transition-transform"

Tailwind CSS oferă utilitare native pentru spațiul tridimensional: setarea punctului de fugă prin perspective-*, rotații precise pe axele X, Y și Z, și conservarea adâncimii 3D pentru elementele copil prin transform-style-3d.

Efect de card cu întoarcere 3D (Flip Card) pe hover
<div class="group h-80 w-64 [perspective:1000px]">
    <div class="relative h-full w-full rounded-2xl shadow-xl transition-all duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
        
        <!-- Fața din față a cardului: -->
        <div class="absolute inset-0 h-full w-full rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 p-6 text-white [backface-visibility:hidden]">
            <h3 class="text-2xl font-bold">Față Card</h3>
            <p class="mt-4 text-indigo-100">Plasează mouse-ul aici pentru a întoarce cardul!</p>
        </div>

        <!-- Fața din spate a cardului: -->
        <div class="absolute inset-0 h-full w-full rounded-2xl bg-gray-900 p-6 text-white [transform:rotateY(180deg)] [backface-visibility:hidden]">
            <h3 class="text-2xl font-bold">Spate Card</h3>
            <p class="mt-4 text-gray-300">Detalii suplimentare și buton de acțiune.</p>
        </div>
        
    </div>
</div>
Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Transformări 3D și Perspectivă în Tailwind CSS: rotate-x, rotate-y și perspective

Ai o nelămurire despre utilizarea comenzii Transformări 3D și Perspectivă în Tailwind CSS: rotate-x, rotate-y și perspective sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.