Visionneuse HTML de cubes 3D

Ouvrir dans l'éditeur Publiez votre code

Recommandé

6 January 2025

Conception de carte de profil

HTML

CSS

/* Basic body styling */
body {
  margin: 0;
  padding: 20px;
  font-family: Arial, sans-serif;
  background: #222;
  color: #fff;
  text-align: center;
}

/* Scene container with perspective */
.scene {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  perspective: 800px;
  border: 2px solid #444;
}

/* Cube container */
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(45deg);
  transition: transform 0.5s ease-out;
  cursor: grab;
}

/* Base styling for cube faces */
.face {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
  background: rgba(0, 128, 255, 0.6);  
}

/* Positioning each face in 3D space */
.front {
  transform: translateZ(150px);
  background: rgba(255, 99, 71, 0.8);
}

.back {
  transform: rotateY(180deg) translateZ(150px);
  background: rgba(60, 179, 113, 0.8);
}

.right {
  transform: rotateY(90deg) translateZ(150px);
  background: rgba(65, 105, 225, 0.8);
}

.left {
  transform: rotateY(-90deg) translateZ(150px);
  background: rgba(238, 130, 238, 0.8);
}

.top {
  transform: rotateX(90deg) translateZ(150px);
  background: rgba(255, 215, 0, 0.8);
}

.bottom {
  transform: rotateX(-90deg) translateZ(150px);
  background: rgba(72, 209, 204, 0.8);
}

JS

// Select the cube element
const cube = document.querySelector('.cube');

let isDragging = false;
let startX, startY;
let currentRotationX = -30;
let currentRotationY = 45;

// Mouse events for dragging to rotate the cube
cube.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX;
  startY = e.clientY;
  cube.style.cursor = "grabbing";
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  cube.style.cursor = "grab";
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

// Calculate the distance moved
  const deltaX = e.clientX - startX;
  const deltaY = e.clientY - startY;
  
  // Update rotation values based on mouse movement
  currentRotationY += deltaX * 0.5;
  currentRotationX -= deltaY * 0.5;

// Apply the rotation transformation
  cube.style.transform = `rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`;

// Update start positions for next calculation
  startX = e.clientX;
  startY = e.clientY;
});

Visionneuse HTML de cubes 3D

Recommandé

Une page d'accueil moderne

Un code de NotYoEA

Conception de carte de profil

HTML

CSS

JS

Recommandé

Une page d'accueil moderne

Un code de NotYoEA

Conception de carte de profil

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS