Cargador de cubos de imágenes 3D

263 iroger7

Abrir en el editor Publica tu código

Recomendado

23 August 2025

Ejemplo de animación de cuadrícula CSS

30 September 2025

Animación de carga CSS con ondas y ondulaciones

14 January 2025

Ejemplo de página web de portafolio

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>3D Image Loader</title>
  <style>
    :root{
      --size: 320px;
      --face-size: calc(var(--size));
    }
    html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
    .wrap{
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:24px;
      background:linear-gradient(180deg,#0f172a 0%,#071031 100%);
      color:#e6eef8;
      padding:32px;
      box-sizing:border-box;
    }

/* Scene */
    .scene{
      width:var(--size);
      height:var(--size);
      perspective:1000px;
      perspective-origin:50% 50%;
      position:relative;
    }

/* Cube */
    .cube{
      width:100%;
      height:100%;
      position:relative;
      transform-style:preserve-3d;
      transition: transform 0.3s cubic-bezier(.2,.9,.3,1);
      will-change:transform;
    }

/* Face common */
    .face{
      position:absolute;
      width:100%;
      height:100%;
      backface-visibility:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      border-radius:8px;
      box-shadow:0 6px 18px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.03);
      background:#0b1220;
      border:1px solid rgba(255,255,255,0.04);
    }

.face img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      pointer-events:none;
    }

/* Position faces */
    .face.front  { transform: rotateY(  0deg) translateZ(calc(var(--face-size) / 2)); }
    .face.back   { transform: rotateY(180deg) translateZ(calc(var(--face-size) / 2)); }
    .face.right  { transform: rotateY( 90deg) translateZ(calc(var(--face-size) / 2)); }
    .face.left   { transform: rotateY(-90deg) translateZ(calc(var(--face-size) / 2)); }
    .face.top    { transform: rotateX( 90deg) translateZ(calc(var(--face-size) / 2)); }
    .face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--face-size) / 2)); }

/* Controls panel */
    .panel{
      min-width:260px;
      max-width:380px;
      background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));
      border:1px solid rgba(255,255,255,0.04);
      padding:16px;
      border-radius:8px;
      box-shadow:0 6px 20px rgba(2,6,23,0.6);
    }
    .panel h3{margin:0 0 8px 0;font-size:16px}
    .faces-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 16px}
    .face-slot{
      background:rgba(255,255,255,0.02);
      border:1px dashed rgba(255,255,255,0.06);
      padding:8px;border-radius:6px;
      text-align:center;font-size:13px;color:#cfe6ff;
      cursor:pointer; user-select:none;
    }
    .face-slot input{display:none}
    .btns{display:flex;gap:8px}
    button{
      background:#0b69ff;border:none;padding:8px 10px;border-radius:6px;color:white;font-weight:600;cursor:pointer;
    }
    button.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);}
    .hint{font-size:12px;color:#9fb8ff;margin-top:10px}

/* small footer */
    .footer{font-size:12px;color:#a8c2ff;margin-top:12px}
    /* loader style for empty face */
    .placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;color:#9fb8ff}
    .placeholder svg{width:36px;height:36px;opacity:0.9}
  </style>
</head>
<body>
  <div class="wrap">
    <div class="scene" id="scene" aria-hidden="false">
      <div class="cube" id="cube" style="transform: rotateX(-18deg) rotateY(26deg);">
        <div class="face front" data-face="front"><div class="placeholder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M3 3h7v7H3z"></path><path d="M14 14h7v7h-7z"></path><path d="M14 3h7v7h-7z"></path><path d="M3 14h7v7H3z"></path></svg><div>Front</div></div></div>
        <div class="face back"  data-face="back"><div class="placeholder"><div>Back</div></div></div>
        <div class="face right" data-face="right"><div class="placeholder"><div>Right</div></div></div>
        <div class="face left"  data-face="left"><div class="placeholder"><div>Left</div></div></div>
        <div class="face top"   data-face="top"><div class="placeholder"><div>Top</div></div></div>
        <div class="face bottom"data-face="bottom"><div class="placeholder"><div>Bottom</div></div></div>
      </div>
    </div>

<aside class="panel" aria-label="controls">
      <h3>3D Image Loader</h3>
      <div class="faces-list" id="facesList">
        <label class="face-slot" data-target="front">Front
          <input type="file" accept="image/*" data-target="front" />
        </label>
        <label class="face-slot" data-target="back">Back
          <input type="file" accept="image/*" data-target="back" />
        </label>
        <label class="face-slot" data-target="right">Right
          <input type="file" accept="image/*" data-target="right" />
        </label>
        <label class="face-slot" data-target="left">Left
          <input type="file" accept="image/*" data-target="left" />
        </label>
        <label class="face-slot" data-target="top">Top
          <input type="file" accept="image/*" data-target="top" />
        </label>
        <label class="face-slot" data-target="bottom">Bottom
          <input type="file" accept="image/*" data-target="bottom" />
        </label>
      </div>

<div class="btns">
        <button id="autoRotate">Toggle Auto-Rotate</button>
        <button class="ghost" id="reset">Reset</button>
      </div>

<div class="hint">Tip: click a face slot to choose an image. You can also drag on the cube to rotate it.</div>
      <div class="footer">Drag an image file onto a face slot or use the file chooser.</div>
    </aside>
  </div>

// Size adaptation: set translateZ based on actual pixel size for effect when CSS variable changes
      function updateFaceZ(){
        // read computed size of scene to compute half depth
        const size = scene.clientWidth;
        document.documentElement.style.setProperty('--size', size + 'px');
        // set transform translateZ on faces (already set in CSS with calc); no change needed here
      }
      updateFaceZ();
      window.addEventListener('resize', updateFaceZ);

// Utility: set image on face
      function setFaceImage(faceName, dataURL){
        const face = document.querySelector('.face[data-face="'+faceName+'"]');
        if(!face) return;
        face.innerHTML = '';
        const img = document.createElement('img');
        img.src = dataURL;
        img.alt = faceName + ' image';
        face.appendChild(img);
      }

// Load file to face
      function handleFile(file, faceName){
        if(!file || !file.type.startsWith('image/')) return;
        const reader = new FileReader();
        reader.onload = e => setFaceImage(faceName, e.target.result);
        reader.readAsDataURL(file);
      }

// Wire file inputs
      faceSlots.forEach(input=>{
        input.addEventListener('change', e=>{
          const file = e.target.files[0];
          const target = e.target.dataset.target;
          handleFile(file, target);
          // clear value so same file can be reloaded
          e.target.value = '';
        });

// Allow drop to individual slots
        const label = input.parentElement;
        label.addEventListener('dragover', ev=>{ ev.preventDefault(); label.style.opacity = 0.9; });
        label.addEventListener('dragleave', ev=>{ label.style.opacity = ''; });
        label.addEventListener('drop', ev=>{
          ev.preventDefault(); label.style.opacity = '';
          const dt = ev.dataTransfer;
          if(dt && dt.files && dt.files.length) handleFile(dt.files[0], input.dataset.target);
        });
      });

// Also allow dropping files directly on cube faces
      faceElements.forEach(face=>{
        face.addEventListener('dragover', ev=>{ ev.preventDefault(); face.style.opacity = 0.95; });
        face.addEventListener('dragleave', ev=>{ face.style.opacity = ''; });
        face.addEventListener('drop', ev=>{
          ev.preventDefault(); face.style.opacity = '';
          const dt = ev.dataTransfer;
          if(dt && dt.files && dt.files.length){
            const faceName = face.dataset.face;
            handleFile(dt.files[0], faceName);
          }
        });
      });

// Basic drag rotate
      let dragging = false;
      let lastX=0,lastY=0;
      let rotX = -18, rotY = 26; // initial
      let velocityX = 0, velocityY = 0;
      const friction = 0.95;
      let autoRotate = false;
      let animId = null;

function applyRotation(){
        cube.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`;
      }
      applyRotation();

// Pointer events for mouse/touch
      scene.addEventListener('pointerdown', e=>{
        e.target.setPointerCapture && e.target.setPointerCapture(e.pointerId);
        startDrag(e.clientX, e.clientY);
      });
      window.addEventListener('pointermove', e=>{
        if(!dragging) return;
        moveDrag(e.clientX, e.clientY);
      });
      window.addEventListener('pointerup', e=>{
        endDrag();
      });
      window.addEventListener('pointercancel', e=>{
        endDrag();
      });

// Keyboard rotation for accessibility
      window.addEventListener('keydown', e=>{
        const step = 8;
        if(e.key === 'ArrowLeft'){ rotY -= step; applyRotation(); }
        if(e.key === 'ArrowRight'){ rotY += step; applyRotation(); }
        if(e.key === 'ArrowUp'){ rotX -= step; applyRotation(); }
        if(e.key === 'ArrowDown'){ rotX += step; applyRotation(); }
      });

// Auto-rotate toggle
      autoBtn.addEventListener('click', ()=>{
        autoRotate = !autoRotate;
        autoBtn.textContent = autoRotate ? 'Stop Auto-Rotate' : 'Toggle Auto-Rotate';
      });

// Reset
      resetBtn.addEventListener('click', ()=>{
        rotX = -18; rotY = 26; velocityX = velocityY = 0; autoRotate = false;
        autoBtn.textContent = 'Toggle Auto-Rotate';
        // clear images: revert to placeholders
        faceElements.forEach(face=>{
          const name = face.dataset.face;
          face.innerHTML = '<div class="placeholder"><div style="font-size:14px;opacity:0.95;">'+name.charAt(0).toUpperCase()+name.slice(1)+'</div></div>';
        });
        applyRotation();
      });

// Small UX: double-click a face to open file chooser for that face
      faceElements.forEach(face=>{
        face.addEventListener('dblclick', ()=>{
          const name = face.dataset.face;
          const input = document.querySelector('.face-slot input[data-target="'+name+'"]');
          if(input) input.click();
        });
      });

// Accessibility: allow keyboard focus on face slots
      document.querySelectorAll('.face-slot').forEach(label=>{
        label.tabIndex = 0;
        label.addEventListener('keypress', (e)=>{
          if(e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            const input = label.querySelector('input');
            if(input) input.click();
          }
        });
      });

// Preload sample images (optional): small data URLs so the demo immediately looks good.
      const samples = {
        front: 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="100%" height="100%" fill="#0b69ff"/><text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="64" fill="#fff">Front</text></svg>'),
        back:  'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="100%" height="100%" fill="#0b9f6a"/><text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="64" fill="#fff">Back</text></svg>'),
        left:  'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="100%" height="100%" fill="#7e57c2"/><text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="64" fill="#fff">Left</text></svg>'),
        right: 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="100%" height="100%" fill="#ff6b6b"/><text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="64" fill="#fff">Right</text></svg>'),
        top:   'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="100%" height="100%" fill="#ffb86b"/><text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="64" fill="#111">Top</text></svg>'),
        bottom:'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="100%" height="100%" fill="#4dd0e1"/><text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="64" fill="#033">Bottom</text></svg>')
      };
      // Initialize with samples
      Object.entries(samples).forEach(([face, data])=> setFaceImage(face, data));

})();
  </script>
</body>
</html>

CSS