js+css实现三维可抽拉的火柴盒子代码-html代码-BFW代码库

js+css实现三维可抽拉的火柴盒子代码

代码语言：html

所属分类：三维

代码描述：js+css实现三维可抽拉的火柴盒子代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
:root {
  --w: 300px;
  --h: 180px;
  --d: 64px;
  --border-thick: 10px;
  --board-t: 4px;
  --board-half: 2px;
  --c-edge: #c7b9ab;
  --safe-w: calc(var(--w) - (var(--border-thick) * 2));
  --safe-h: calc(var(--h) - (var(--border-thick) * 2));
  --m-w: 250px;
  --m-t: 6px;
  --c-light: #fdfaf5;
  --c-wrapped-yellow: #dcb651;
  --c-cardboard: #d4c3b3;
  --c-inside: #cec0b2;
  --c-ink-red: #701d14;
  --wood-top: #f5e1c8;
  --wood-side: #d9bc9b;
  --wood-dark: #b89f81;
  --sulfur: #7a160e;
  --noise: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.3"/%3E%3C/svg%3E');
  --wood-grain: repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent 4px);
  --hex-striker:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13.85' viewBox='0 0 8 13.85'%3E%3Cpolygon points='4,1 6.6,2.5 6.6,5.5 4,7 1.4,5.5 1.4,2.5' fill='%23762409'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13.85' viewBox='0 0 8 13.85'%3E%3Cpolygon points='4,1 6.6,2.5 6.6,5.5 4,7 1.4,5.5 1.4,2.5' fill='%23762409'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.55), transparent 42%),
    radial-gradient(circle at 50% 75%, rgba(0,0,0,0.05), transparent 48%),
    #f3f1ed;
  overflow: hidden;
  font-family: Georgia, Baskerville, "Palatino Linotype", serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  perspective: 2500px;
}

.pivot {
  z-index: 1;
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform: scale(1.08) rotateX(52deg) rotateZ(-35deg);
  cursor: pointer;
  touch-action: none;
  will-change: transform;
}

.pivot.dragging {
  cursor: grabbing;
}

.credit {
  position: fixed;
  right: 14px;
  bottom: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: rgba(0,0,0,0.32);
  text-decoration: none;
  z-index: 999;
}

.cast-shadow {
  position: absolute;
  width: 380px;
  height: 210px;
  left: -40px;
  top: -20px;
  transform: translateZ(calc((var(--d) / -2) - 18px));
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.18) 38%, rg.........完整代码请登录后点击上方下载按钮下载查看