ilusão de profundidade

662 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

11 August 2025

Coleção de Animação em Círculo CSS

19 May 2025

animação de caixa de mosca 3D

19 May 2025

Smartwatches de luxo que redefinem elegância e tecnologia

HTML

CSS

body {
 margin: 0;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 background: #000;
 overflow: hidden;
}
/*cena com perspectiva */
.scene {
 position: relative;
 width: 100%;
 height: 100%;
 perspective: 1000px;
 perspective-origin: 50% 50%;
}
/*estilo comum dos paineis com posicao inicial no eixo z */
.panel {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 350px;
 height: 100px;
 background: linear-gradient(
   to bottom,
   rgba(147, 112, 219, 0.6) 0%, 
   rgba(106, 90, 205, 0.5) 50%, 
   rgba(75, 0, 130, 0.4) 100%
   );
 border: 2px solid rgba(147, 112, 219, 0.8);  
 border-radius: 20px;
 transform: translate(-50%, -50%) translateZ(-1000px) rotateX(15deg); 
 opacity: 0;
 animation: approach 4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
 animation-delay: calc(var(--delay) * 1s);
    box-shadow: 
    0 15px 25px rgba(147, 112, 219, 0.15);
    background-blend-mode: overlay;
   }
   /*delay para cada painel */
 .panel:nth-child(1) {
    --delay: 1;
      width: 350px;
      height: 100px;
     }

.panel:nth-child(2) {
      --delay: 2;
        width: 300px;
        height: 85px;
       }

.panel:nth-child(3) {
        --delay: 3;
          width: 250px;
          height: 70px;
         }

.panel:nth-child(4) {
          --delay: 4;
            width: 200px;
            height: 55px;
           }
           /*animacao */
           @keyframes approach {
            0% {
             opacity: 0;
             transform: translate(-50%, -50%) translateZ(-1000px) rotateX(15deg);
             box-shadow: 0 15px 25px rgba(147, 112, 219, 0.15);
            }
            50% {
             opacity: 0.7;
             transform: translate(-50%, -50%) translateZ(-500px) rotateX(7deg);
             box-shadow: 0 20px 30px rgba(147, 112, 219, 0.25);
            }
            100% {
             opacity: 1;
             transform: translate(-50%, -50%) translateZ(calc(var(--z) * 1px)) rotateX(0deg); /* Posição final no eixo Z */
                box-shadow: 0 25px 35px rgba(147, 112, 219, 0.3); /* Sombra final realista */
               }
              }
              /*translateZ para cada 1 */
              .panel:nth-child(1) { --z: 200; }
                .panel:nth-child(2) { --z: 100; }
                  .panel:nth-child(3) { --z: 0; }
                    .panel:nth-child(4) { --z: -100; }

Recomendado

Coleção de Animação em Círculo CSS

animação de caixa de mosca 3D

Smartwatches de luxo que redefinem elegância e tecnologia

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS