नेविगेशन बार मेनू

891 kevekıbhack

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

17 November 2024

क्षैतिज मेनू बार

14 January 2026

एचटीएमएल सीएसएस साइडबार उदाहरण रिस्पॉन्सिव लेआउट

28 June 2025

ओएमआईसी ईएसटी डैशबोर्ड HTML साइडबार नेविगेशन

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

अनुशंसित

क्षैतिज मेनू बार

एचटीएमएल सीएसएस साइडबार उदाहरण रिस्पॉन्सिव लेआउट

ओएमआईसी ईएसटी डैशबोर्ड HTML साइडबार नेविगेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS