4 mayo, 2021
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
Suscríbete a nuestro canal en Youtube
SuscríbirsePara 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 4287 veces
