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

Cómo diseñar un menu 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

<!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>

 

No tiene descargable

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 82 veces | Publicado hace 1 semana

Curso Android Desarrollo App Restaurante

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021