Kiub boleh seret (CSS, JS)

Demo

HTML view ▼

<div class="labu">
<div id="cube-wrap">
  <div class="cube" id="cube">
    <div class="face top"></div>
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face left"></div>
    <div class="face right"></div>
    <div class="face bottom"></div>
    <div class="inner-wrap">
      <div class="face inner inner1"></div>
      <div class="face inner inner2"></div>
      <div class="face inner inner3"></div>
    </div>
  </div>
 </div>
</div>
<style>
  :root {
  --cube: 44vmin;
}
.labu *,
.labu *::before,
.labu *::after {
  box-sizing: border-box;
}
.labu {
  margin: 0;
}
#cube-wrap {
  perspective: 1600px;
  perspective-origin: 50% var(--cube);
  height: 78vh;
  display: grid;
  align-content: center;
  overflow: hidden;
  cursor: grab;
}
#cube-wrap:active {
  cursor: grabbing;
}
.cube {
  position: relative;
  width: var(--cube);
  height: var(--cube);
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(45deg);
  margin: 0 auto;
  user-select: none;
}
.inner-wrap {
  position: relative;
  width: var(--cube);
  height: var(--cube);
  transform-style: preserve-3d;
  animation: spin 5s infinite linear;
  margin: 0 auto;
  user-select: none;
}
.cube .face {
  position: absolute;
  background: rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 1px solid brown;
}
.front {
  transform: rotateY(0deg) translateZ(calc(var(--cube) * 0.5));
}
.back {
  transform: rotateY(180deg) translateZ(calc(var(--cube) * 0.5));
}
.left {
  transform: rotateY(-90deg) translateZ(calc(var(--cube) * 0.5));
}
.right {
  transform: rotateY(90deg) translateZ(calc(var(--cube) * 0.5));
}
.top {
  transform: rotateX(90deg) translateY(calc(var(--cube) * -0.5));
  transform-origin: top left;
}
.bottom {
  transform: rotateX(-90deg) translateY(calc(var(--cube) * 0.5));
  transform-origin: bottom left;
}
.inner1 {
  transform: rotateX(0) rotateY(90deg) translateY(0px);
}
.inner2 {
  transform: rotateX(90deg) translateY(0px);
}
.inner3 {
}
.cube .inner {
  border: 6px solid black;
  backface-visibility: visible !important;
  border-radius: 100%;
}
@keyframes spin {
  from {
    transform: rotateX(0) rotateY(0);
  }
  to {
    transform: rotateX(1turn) rotateY(1turn);
  }
}
</style>
<script>
var cube = document.getElementById("cube");
var cubeWrap = document.getElementById("cube-wrap");
var isDragging = false;
var currentX, currentY, initialX, initialY;
var xOffset = 0,
  yOffset = 0;
cubeWrap.addEventListener("mousedown", dragStart, false);
cubeWrap.addEventListener("mouseup", dragEnd, false);
cubeWrap.addEventListener("mousemove", drag, false);
cubeWrap.addEventListener("touchstart", dragStart, false);
cubeWrap.addEventListener("touchend", dragEnd, false);
cubeWrap.addEventListener("touchmove", drag, false);
function dragStart(e) {
  e = e.type == "touchstart" ? e.touches[0] : e; 
  initialX = e.clientX - xOffset;
  initialY = e.clientY - yOffset;
  if (cubeWrap.contains(e.target)) {
    isDragging = true;
  }
}
function dragEnd() {
  initialX = currentX;
  initialY = currentY;
  isDragging = false;
}
function drag(e) {
  if (isDragging) {
    e = e.type == "touchmove" ? e.touches[0] : e; 
    currentX = e.clientX - initialX;
    currentY = e.clientY - initialY;
    xOffset = currentX;
    yOffset = currentY;
    setTranslate(currentX, currentY, cube);
  }
}
function setTranslate(xPos, yPos, el) {
  el.style.transform = "rotateX(" + (-yPos) + "deg) rotateY(" + (-xPos) + "deg)"; 
}
</script>

Tutup

JS main kebas je di codepen.io/carterfromsl/pen/QWZXbqB