Emoji databáze → Příručka → 3D Efekty
📚 Databáze emoji
🎲

3D CSS Efekty pro Emoji

Flip karty, rotující kostky, perspective tilt, karusely a další pokročilé 3D transformace

📅 Aktualizováno: 13. 12. 2025 ⏱️ 20 min čtení 🏷️ 3D, CSS, Transformace

🎯 Úvod do 3D CSS transformací

CSS 3D transformace umožňují vytvářet poutavé vizuální efekty přímo v prohlížeči bez potřeby JavaScriptu nebo externích knihoven. Klíčové vlastnosti jsou:

💡
Tip pro výkon

3D transformace jsou GPU akcelerované, takže jsou velmi výkonné. Vyhněte se ale příliš mnoha prvkům s preserve-3d současně.

🔄 1. Flip Card (Otočná karta)

Klasický efekt otáčející karty s obsahem na přední i zadní straně. Skvělý pro profilové karty, produkty nebo interaktivní kvízy.

Najeďte myší pro otočení
🎭
🎪
HTML 
<div class="flip-card">
    <div class="flip-card-inner">
        <div class="flip-card-front">🎭</div>
        <div class="flip-card-back">🎪</div>
    </div>
</div>
CSS 
.flip-card {
    width: 150px;
    height: 150px;
    perspective: 1000px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

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

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.flip-card-front {
    background: linear-gradient(135deg, #FFD700, #FF9500);
}

.flip-card-back {
    background: linear-gradient(135deg, #10B981, #06B6D4);
    transform: rotateY(180deg);
}

🎲 2. 3D Kostka

Plně rotující 3D kostka s emoji na každé stěně. Automaticky se otáčí, při hoveru se zastaví.

Najeďte myší pro zastavení
🎯
⭐
🚀
💎
🔥
💜
HTML 
<div class="cube-container">
    <div class="cube">
        <div class="cube-face cube-face-front">🎯</div>
        <div class="cube-face cube-face-back">⭐</div>
        <div class="cube-face cube-face-right">🚀</div>
        <div class="cube-face cube-face-left">💎</div>
        <div class="cube-face cube-face-top">🔥</div>
        <div class="cube-face cube-face-bottom">💜</div>
    </div>
</div>
CSS 
.cube-container {
    width: 120px;
    height: 120px;
    perspective: 600px;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 8s infinite linear;
}

.cube-face {
    position: absolute;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 12px;
}

.cube-face-front  { transform: rotateY(0deg) translateZ(60px); }
.cube-face-back   { transform: rotateY(180deg) translateZ(60px); }
.cube-face-right  { transform: rotateY(90deg) translateZ(60px); }
.cube-face-left   { transform: rotateY(-90deg) translateZ(60px); }
.cube-face-top    { transform: rotateX(90deg) translateZ(60px); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(60px); }

@keyframes rotateCube {
    from { transform: rotateX(0deg) rotateY(0deg); }
    to { transform: rotateX(360deg) rotateY(360deg); }
}

.cube-container:hover .cube {
    animation-play-state: paused;
}

📐 3. Perspective Tilt

Interaktivní efekt naklánění podle pozice myši. Emoji se "vznáší" nad kartou díky translateZ.

Pohybujte myší nad kartou
🎨

Efekt vyžaduje JavaScript pro sledování myši

HTML + CSS 
<div class="tilt-card" id="tiltCard">
    <span class="emoji">🎨</span>
</div>

<style>
.tilt-card {
    width: 180px;
    height: 180px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    transition: transform 0.1s ease-out;
    transform-style: preserve-3d;
    cursor: pointer;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.4);
}

.tilt-card .emoji {
    transform: translateZ(30px);
    transition: transform 0.3s ease;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

.tilt-card:hover .emoji {
    transform: translateZ(50px) scale(1.1);
}
</style>
JavaScript 
const card = document.getElementById('tiltCard');

card.addEventListener('mousemove', (e) => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    
    const rotateX = (y - centerY) / 10;
    const rotateY = (centerX - x) / 10;
    
    card.style.transform = `
        perspective(1000px) 
        rotateX(${rotateX}deg) 
        rotateY(${rotateY}deg)
    `;
});

card.addEventListener('mouseleave', () => {
    card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
});

💥 4. 3D Pop-out

Emoji "vyskakuje" z obrazovky směrem k uživateli při hoveru.

Najeďte myší
🚀
CSS 
.pop-out-container {
    perspective: 800px;
}

.pop-out {
    font-size: 5rem;
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.pop-out:hover {
    transform: translateZ(100px) scale(1.3);
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.4));
}

Rotující 3D karusel s osmi emoji. Automaticky se otáčí, při hoveru se zastaví.

Najeďte pro zastavení
😀
🎉
🌟
🔥
💎
🎯
🚀
💜
CSS 
.carousel-container {
    width: 300px;
    height: 200px;
    perspective: 1000px;
    position: relative;
}

.carousel {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCarousel 12s infinite linear;
}

.carousel-item {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    margin: -40px 0 0 -40px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    backdrop-filter: blur(5px);
}

/* Pozice jednotlivých položek v kruhu */
.carousel-item:nth-child(1) { transform: rotateY(0deg) translateZ(150px); }
.carousel-item:nth-child(2) { transform: rotateY(45deg) translateZ(150px); }
.carousel-item:nth-child(3) { transform: rotateY(90deg) translateZ(150px); }
.carousel-item:nth-child(4) { transform: rotateY(135deg) translateZ(150px); }
.carousel-item:nth-child(5) { transform: rotateY(180deg) translateZ(150px); }
.carousel-item:nth-child(6) { transform: rotateY(225deg) translateZ(150px); }
.carousel-item:nth-child(7) { transform: rotateY(270deg) translateZ(150px); }
.carousel-item:nth-child(8) { transform: rotateY(315deg) translateZ(150px); }

@keyframes rotateCarousel {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

.carousel-container:hover .carousel {
    animation-play-state: paused;
}

📊 6. 3D Extrusion (Hloubkový efekt)

Vytvoření iluze hloubky pomocí vrstev. Emoji vypadá jako vytlačené do prostoru.

Najeďte myší pro změnu úhlu
⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐
CSS 
.extrusion {
    position: relative;
    font-size: 5rem;
    transform-style: preserve-3d;
    transform: rotateX(20deg) rotateY(-20deg);
    cursor: pointer;
    transition: transform 0.5s ease;
}

.extrusion:hover {
    transform: rotateX(0deg) rotateY(0deg);
}

.extrusion-layer {
    position: absolute;
    top: 0;
    left: 0;
}

/* 10 vrstev s postupným ztmavením */
.extrusion .layer-1 { transform: translateZ(0px); }
.extrusion .layer-2 { transform: translateZ(-2px); filter: brightness(0.95); }
.extrusion .layer-3 { transform: translateZ(-4px); filter: brightness(0.9); }
.extrusion .layer-4 { transform: translateZ(-6px); filter: brightness(0.85); }
.extrusion .layer-5 { transform: translateZ(-8px); filter: brightness(0.8); }
.extrusion .layer-6 { transform: translateZ(-10px); filter: brightness(0.75); }
.extrusion .layer-7 { transform: translateZ(-12px); filter: brightness(0.7); }
.extrusion .layer-8 { transform: translateZ(-14px); filter: brightness(0.65); }
.extrusion .layer-9 { transform: translateZ(-16px); filter: brightness(0.6); }
.extrusion .layer-10 { transform: translateZ(-18px); filter: brightness(0.55); }

🏔️ 7. Parallax Layers

Vrstvy emoji pohybující se různou rychlostí vytvářejí iluzi hloubky.

Pohybujte myší nad scénou
🌙
⭐
✨
CSS + JavaScript 
.parallax-scene {
    width: 300px;
    height: 200px;
    position: relative;
    perspective: 600px;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}

.parallax-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease-out;
}

.parallax-layer-1 { z-index: 1; font-size: 6rem; }
.parallax-layer-2 { z-index: 2; font-size: 3rem; }
.parallax-layer-3 { z-index: 3; font-size: 1.5rem; }
JavaScript 
const scene = document.getElementById('parallaxScene');
const layers = scene.querySelectorAll('.parallax-layer');

scene.addEventListener('mousemove', (e) => {
    const rect = scene.getBoundingClientRect();
    const x = (e.clientX - rect.left - rect.width / 2) / 10;
    const y = (e.clientY - rect.top - rect.height / 2) / 10;
    
    layers.forEach((layer, index) => {
        const depth = (index + 1) * 0.3;
        layer.style.transform = `
            translateX(${x * depth}px) 
            translateY(${y * depth}px)
        `;
    });
});

scene.addEventListener('mouseleave', () => {
    layers.forEach(layer => {
        layer.style.transform = 'translateX(0) translateY(0)';
    });
});

🎈 8. 3D Float

Emoji se vznáší v prostoru s komplexní 3D animací.

Automatická animace
🎈
CSS 
.float-3d {
    font-size: 5rem;
    display: inline-block;
    animation: float3dComplex 4s ease-in-out infinite;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.3));
}

@keyframes float3dComplex {
    0%, 100% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: translateY(-20px) rotateX(10deg) rotateY(10deg) rotateZ(5deg);
    }
    50% {
        transform: translateY(-10px) rotateX(-5deg) rotateY(-10deg) rotateZ(-5deg);
    }
    75% {
        transform: translateY(-25px) rotateX(5deg) rotateY(5deg) rotateZ(3deg);
    }
}

🚪 9. 3D Door Reveal

Dveře se otevírají a odhalují skryté emoji za nimi.

Najeďte myší pro otevření
🎁
🚪
CSS 
.door-container {
    perspective: 1000px;
    width: 150px;
    height: 150px;
}

.door {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.door-front {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    backface-visibility: hidden;
    transform-origin: left center;
    transition: transform 0.6s ease;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
}

.door-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #10B981, #34D399);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
}

.door-container:hover .door-front {
    transform: rotateY(-120deg);
}

📚 10. 3D Stack

Vrstvená hromádka emoji karet s perspektivním pohledem.

Najeďte myší pro rozložení
📝
📋
📁
📂
📚
CSS 
.stack-container {
    perspective: 800px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stack {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateZ(-30deg);
    transition: transform 0.5s ease;
}

.stack:hover {
    transform: rotateX(40deg) rotateZ(-20deg);
}

.stack-item {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.stack-item:nth-child(1) { transform: translateZ(0px); background: #FFD700; }
.stack-item:nth-child(2) { transform: translateZ(20px); background: #FF9500; }
.stack-item:nth-child(3) { transform: translateZ(40px); background: #FF6B6B; }
.stack-item:nth-child(4) { transform: translateZ(60px); background: #A855F7; }
.stack-item:nth-child(5) { transform: translateZ(80px); background: #3B82F6; }

/* Rozložení při hoveru */
.stack:hover .stack-item:nth-child(1) { transform: translateZ(0px) translateX(-20px); }
.stack:hover .stack-item:nth-child(2) { transform: translateZ(30px) translateX(-10px); }
.stack:hover .stack-item:nth-child(3) { transform: translateZ(60px); }
.stack:hover .stack-item:nth-child(4) { transform: translateZ(90px) translateX(10px); }
.stack:hover .stack-item:nth-child(5) { transform: translateZ(120px) translateX(20px); }

📖 11. 3D Kniha

Realistická 3D kniha s obálkou, hřbetem a stránkami.

Najeďte myší pro otevření
📖
CSS 
.book {
    position: relative;
    width: 120px;
    height: 160px;
    transform-style: preserve-3d;
    transform: rotateY(-20deg);
    transition: transform 0.5s ease;
    cursor: pointer;
}

.book:hover {
    transform: rotateY(-40deg);
}

.book-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #8B5CF6, #6366F1);
    border-radius: 0 10px 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    transform-origin: left center;
    transform: translateZ(15px);
    box-shadow: 5px 5px 20px rgba(0,0,0,0.3);
}

.book-spine {
    position: absolute;
    width: 30px;
    height: 100%;
    background: linear-gradient(135deg, #7C3AED, #5B21B6);
    transform: rotateY(-90deg) translateZ(0px) translateX(-15px);
}

.book-pages {
    position: absolute;
    width: 100%;
    height: 96%;
    top: 2%;
    background: linear-gradient(90deg, #f5f5f5, #fff, #f5f5f5);
    transform: translateZ(-1px);
    border-radius: 0 2px 2px 0;
}

🌐 12. 3D Sphere

Emoji na kulové ploše s realistickým stínováním.

Automatická rotace
🌍
CSS 
.sphere {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 30% 30%, 
        #FFD700, 
        #FF9500 50%, 
        #CC7000 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    box-shadow: 
        inset -20px -20px 40px rgba(0,0,0,0.3),
        inset 20px 20px 40px rgba(255,255,255,0.2),
        0 20px 40px rgba(0,0,0,0.3);
    animation: rotateSphere 6s ease-in-out infinite;
}

@keyframes rotateSphere {
    0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
    50% { transform: rotateY(180deg) rotateX(10deg); }
}

📚 Související články

📖
Kompletní příručka emoji
Základy, animace, filtry a hover efekty
 😊
Emoji databáze
Přes 1500 emoji k okamžitému kopírování
📚