Inicio » Blog » CSS

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

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

Descarga el código fuente CSS

Menú CSS con animación circular 3D

Debe registrarse para descargar

Descargar Código Fuente

Compartir enlace del tutorial

Codea App Codea App

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

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2023