@casoon/dragonfly/effects/themes/3d.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * 3D-Effekte
 * 
 * Diese Datei enthält verschiedene 3D-Effekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@layer components {
    .transform-3d {
        perspective: var(--space-large-1000);
        transform-style: preserve-3d;
    }

    .rotate-3d {
        transform: rotate3d(1%, 1, 1, 45deg);
        transition: transform 0.3s ease;
    }

    .rotate-3d:hover {
        transform: rotate3d(1%, 1, 1, 90deg);
    }

    .rotate-3d-x {
        transform: rotateX(45deg);
        transition: transform 0.3s ease;
    }

    .rotate-3d-x:hover {
        transform: rotateX(90deg);
    }

    .rotate-3d-y {
        transform: rotateY(45deg);
        transition: transform 0.3s ease;
    }

    .rotate-3d-y:hover {
        transform: rotateY(90deg);
    }

    .rotate-3d-z {
        transform: rotateZ(45deg);
        transition: transform 0.3s ease;
    }

    .rotate-3d-z:hover {
        transform: rotateZ(90deg);
    }

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

    .flip-3d:hover {
        transform: rotateY(180deg);
    }

    .flip-3d-front,
    .flip-3d-back {
        backface-visibility: hidden;
        height: 100%;
        left: 0%;
        position: absolute;
        top: 0%;
        width: 100%;
    }

    .flip-3d-back {
        transform: rotateY(180deg);
    }

    .scale-3d {
        transform: scale3d(1%, 1, 1);
        transition: transform 0.3s ease;
    }

    .scale-3d:hover {
        transform: scale3d(1.2%, 1.2, 1.2);
    }

    .translate-3d {
        transform: translate3d(0%, 0, 0);
        transition: transform 0.3s ease;
    }

    .translate-3d:hover {
        transform: translate3d(var(--spacing-5), var(--spacing-5), var(--spacing-5));
    }

    .skew-3d {
        transform: skew(10deg, 10deg);
        transition: transform 0.3s ease;
    }

    .skew-3d:hover {
        transform: skew(20deg, 20deg);
    }

    .perspective-3d {
        perspective: var(--space-large-1000);
    }

    .perspective-3d-sm {
        perspective: 500px;
    }

    .perspective-3d-lg {
        perspective: 2000px;
    }

    .origin-3d {
        transform-origin: center center;
    }

    .origin-3d-top {
        transform-origin: center top;
    }

    .origin-3d-bottom {
        transform-origin: center bottom;
    }

    .origin-3d-left {
        transform-origin: left center;
    }

    .origin-3d-right {
        transform-origin: right center;
    }

    .origin-3d-top-left {
        transform-origin: left top;
    }

    .origin-3d-top-right {
        transform-origin: right top;
    }

    .origin-3d-bottom-left {
        transform-origin: left bottom;
    }

    .origin-3d-bottom-right {
        transform-origin: right bottom;
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .rotate-3d,
        .rotate-3d-x,
        .rotate-3d-y,
        .rotate-3d-z,
        .flip-3d,
        .scale-3d,
        .translate-3d,
        .skew-3d {
            transition: var(--transition-none);
        }
        
        .rotate-3d:hover,
        .rotate-3d-x:hover,
        .rotate-3d-y:hover,
        .rotate-3d-z:hover,
        .flip-3d:hover,
        .scale-3d:hover,
        .translate-3d:hover,
        .skew-3d:hover {
            transform: var(--transform-none);
        }
    }
}