Menú CSS con animación circular 3D

Para diseñar un menu 3d css utilizamos variables y reglas que modifiquen la posición de los elementos en los ejes x y z veamos un ejemplo sencillo

Card 3d flip básico con perspective

Diseño de una Layout Responsive

Para diseñar un menu 3d css utilizamos variables y reglas que modifiquen la posición de los elementos en los ejes x y z veamos un ejemplo sencillo

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MENU CSS 3D ANIMACIÓN</title>
    <style>
        body{
            display: grid;
            min-height: 100vh;
        }
        .contenedor{
            display: grid;
            place-items: center;
        }
        .contenedor .caja{
            transform-style: preserve-3d;
            animation: animacionCircular 50s linear infinite;
        }
        @keyframes animacionCircular {
            0%{ transform: perspective(1000px) rotateX(0deg) rotate(0deg); }
            100%{transform: perspective(1000px) rotateX(360deg) rotate(0deg); }
        }
        .contenedor .caja span{
            position: absolute;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            font-size: 50px;
            -webkit-text-stroke: yellow 1px;
            transform-style: preserve-3d;
            transform: translate(-50%,-50%) rotateX(calc(var(--i) * 36deg)) translateZ(200px);
            box-shadow: 0px 0px 10px black;
        }
        .boton{
            background: yellow;
            padding: 10px;
            border-radius: 10px;
            text-decoration: none;
        }



    </style>

</head>
<body>

    <div class="contenedor">
        <div class="caja">
            <span style="--i:1"><a href="https://codea.app" class="boton">AREQUIPA</a></span>
            <span style="--i:2"><a href="https://codea.app" class="boton">YANAHUARA</a></span>
            <span style="--i:3"><a href="https://codea.app" class="boton">COLCA</a></span>
            <span style="--i:4"><a href="https://codea.app" class="boton">CAYMA</a></span>
            <span style="--i:5"><a href="https://codea.app" class="boton">HUNTER</a></span>

            <span style="--i:6"><a href="https://codea.app" class="boton">SOCABAYA</a></span>
            <span style="--i:7"><a href="https://codea.app" class="boton">SELVA</a></span>
            <span style="--i:8"><a href="https://codea.app" class="boton">YURA</a></span>
            <span style="--i:9"><a href="https://codea.app" class="boton">CHIGUATA</a></span>
            <span style="--i:10"><a href="https://codea.app" class="boton">MOLLENDO</a></span>
        </div>
    </div>
    
    
</body>
</html>

Leido 2724 veces