menu da barra de navegação

330 kevekıbhack

Abrir no Editor Publique Seu Código

Recomendado

10 July 2025

Modelo de cardápio de restaurante em HTML

13 March 2025

Um código por lebdev

13 June 2025

carregamento de torradas de ovos

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

Modelo de cardápio de restaurante em HTML

Um código por lebdev

carregamento de torradas de ovos

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS