menú de la barra de navegación

893 kevekıbhack

Abrir en el editor Video Publica tu código

Recomendado

17 July 2025

Plantilla HTML del panel de control de Couture Atelier

30 August 2024

Botón de neón

31 October 2025

Presentación de la naturaleza HTML: Vídeo, Superposición, Menú social

HTML

CSS

body {
  margin: 0;
  background: #121212;
  color: white;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.scene {
  width: 200px;
  height: 200px;
  perspective: 800px;
  margin-bottom: 20px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 1s ease;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #888;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  backface-visibility: hidden;
}

.front  { transform: translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

button {
  padding: 10px 20px;
  font-size: 16px;
  background: #00bcd4;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}
button:hover {
  background: #0097a7;
}

Recomendado

Plantilla HTML del panel de control de Couture Atelier

Botón de neón

Presentación de la naturaleza HTML: Vídeo, Superposición, Menú social

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS