Inicio » Blog » CSS
Menú CSS con animación circular 3D

Menú CSS con animación circular 3D

Menú 3d en CSS

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

VER DEMO

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>

 

Descarga código fuente 166

Talvez tiene el código fuente para descargar

Ver Código Fuente

Redactado por: , Leido 2452 veces

Más tutoriales de programación CSS

Codea App
Codea App FullStack

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

You Fb Tik Pin

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