Bits of .NET

🎲 3D Effects = CSS Transforms

3D effects create immersive experiences. CSS transforms enable 3D animations and interactions.

📝 3D Transforms

// 3D Rotate
.card {
    transform: perspective(1000px) rotateY(20deg);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: perspective(1000px) rotateY(0deg);
}

// 3D Flip
.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

// 3D Translate
.object {
    transform: perspective(800px) translateZ(50px);
}

.object:hover {
    transform: perspective(800px) translateZ(100px);
}

// 3D Scale
.object {
    transform: perspective(800px) scale3d(1.1, 1.1, 1.1);
}

🎯 Advanced 3D Effects

// 3D Tilt Effect
.tilt {
    transition: transform 0.2s ease;
    transform-style: preserve-3d;
}

.tilt:hover {
    transform: rotateX(5deg) rotateY(5deg);
}

// 3D Carousel
.carousel {
    transform-style: preserve-3d;
    animation: rotate-carousel 10s infinite linear;
}

@keyframes rotate-carousel {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

// 3D Cube
.cube {
    transform-style: preserve-3d;
    animation: spin-cube 10s infinite linear;
}

@keyframes spin-cube {
    0% { transform: rotateX(0) rotateY(0); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

// Parallax Effect
.parallax {
    transform: translateZ(0);
    will-change: transform;
}

.parallax-scroll {
    transform: translateZ(-1px) scale(2);
}

// 3D Button
.button-3d {
    transform: perspective(1000px) translateZ(0);
    transition: all 0.3s ease;
}

.button-3d:hover {
    transform: perspective(1000px) translateZ(20px) scale(1.05);
}

.button-3d:active {
    transform: perspective(1000px) translateZ(-10px) scale(0.95);
}

💡 3D CSS Tips

• Use perspective for depth
• Use preserve-3d for children
• Use will-change for performance
• Test on different browsers
• Consider reduced motion preferences