Cómo diseñar un menu CSS con animación circular 3D

Card 3d flip básico con perspective

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

Compartir enlace del tutorial

Link Whatsapp Messenger Facebook Twitter

Más tutoriales de programación CSS

1 ¿Qué es una hojas de estilos CSS? 2 Vincular un hoja de estilos CSS 3 Centrar un div con CSS 4 Aplicar CSS en una página web 5 CSS en el Head 6 Aplicar efectos animados con transition 7 Poner imagen en un div responsive 8 Posicionar elementos o divs con CSS 9 Estilo hoja de notas con CSS puro 10 Diseñar iconos burger y doots 11 Agregar efecto degradado a texto 12 Aprende a usar Animate.css rápido y fácil 13 Diseñar ventana modal responsive 14 Ajustar texto a una imagen shape-outside 15 Diseñar un menu responsive 16 Diseñar el background en 50% de un H1 17 Hola Mundo con CSS 18 Timeline en CSS sencillo 19 Diseño de Card con CSS 20 Animar elementos con CSS 21 Texto Circular con CSS y JS 22 Card 3d flip básico con perspective 23 Menú CSS con animación circular 3D 24 Diseño de una Layout Responsive 25 Dividir layout a la mitad con CSS 26 Crear un botón con Html Css 27 Diseño de un Card Animado con CSS 28 Menú Hamburguesa Animado con CSS 29 Optimizar CSS en una página web

Menú CSS con animación circular 3D

Talvez tiene el código fuente para descargar

Más tutoriales de programación CSS

Core

Enlaces