menu della barra di navigazione

478 kevekıbhack

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

27 May 2025

Come animare il colore di sfondo

29 July 2025

Un codice del testo

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;
}

menu della barra di navigazione

Consigliato

Carta di pagamento

Come animare il colore di sfondo

Un codice del testo

HTML

CSS

JS

Consigliato

Carta di pagamento

Come animare il colore di sfondo

Un codice del testo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS