menu de la barre de navigation

1,235 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 June 2025

Exemple de formulaire de connexion HTML

17 July 2024

Modèle de site Web de portfolio HTML 2024

23 August 2024

Page de destination de React Netflix

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