div+css实现一个三维3d店铺门店三维模型旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：div+css实现一个三维3d店铺门店三维模型旋转动画效果代码，无js代码

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


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

<head>

  <meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(#9cf, #69c);
  perspective: 1000px;
}

@keyframes rotateDrawing {
  0% {
    transform: translate(-50%, -50%) translateZ(-20vmin) rotateY(0deg);
  }
  100% {
    transform: translate(-50%, -50%) translateZ(-20vmin) rotateY(-360deg);
  }
}

.canvas {
  animation: rotateDrawing 15s linear infinite;
  width: 70vmin;
  height: 75vmin;
  abackground: #f002;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(-20vmin) rotate3d(0, 1, 0, -0deg);
  transform-style: preserve-3d;
}

.cube {
  --h: 0deg;
  --s: 50%;
  --l: 50%;
  --t: 0;
  background: hsl(var(--h), var(--s), var(--l));
  position: absolute;
  transform: translateZ(calc(var(--t) * -1));
  transform-style: preserve-3d;
}

.cube::before,
.cube::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--d);
  height: 100%;
  background: hsl(var(--h), var(--s), calc(var(--l) * 0.8));
  transform: rotateY(-90deg);
  transform-origin: 0 50%;
}

.cube::after {
  left: auto;
  right: 0;
  transform-origin: 100% 50%;
  transform: rotateY(90deg);
}

.cube > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsl(var(--h), var(--s), var(--l));
  transform: translate3d(0, 0, var(--d));
  transform-style: preserve-3d;
}

.cube > div::before,
.cube > div::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: hsl(var(--h), var(--s), calc(var(--l) * 1.15));
  width: 100%;
  height: var(--d);
  transform: rotateX(-90deg);
  transform-origin: 50% 0;
}

.cube > div::after {
  top: auto;
  bottom: 0;
  transform: rotateX(90deg);
  transform-origin: 50% 100%;
  background: hsl(var(--h), var(--s), calc(var(--l) * 0.6));
}

/* drawing */
.canvas div {
  position: absolute;
  transform-style: preserve-3d;
}

.step {
  --s: 10%;
  --l: 80%;
  --d: 15vmin;
  --t: 2vmin;
  width: 29vmin;
  height: 4vmin;
  bottom: 0;
  right: 3vmin;
}

.step > div::before {
  background:
    linear-gradient(hsl(var(--h), var(--s), calc(var(--l) * 1.15)) calc(99% - 2vmin), #444 0, #000 99%, hsl(var(--h), var(--s), calc(var(--l) * 1.15)) 0)
}

.door {
  width: 25vmin;
  height: 50vmin;
  bottom: 4vmin;
  right: 5vmin;
}

.door .cube {
  --h: 20deg;
  --s: 40%;
  --l: 40%;
  --d: 4vmin;
  --t: 2vmin;
}

.frame-top {
  width: 100%;
  height: 2vmin;
}

.frame-side {
  width: 2vmin;
  height: 100%;
}

.frame-side + .frame-side {
  right: 0;
}

.door .door-board {
  --d: 2vmin;
  --t: 2vmin;
  top: 2vmin;
  left: 2vmin;
  width: calc(100% - 4vmin);
  height: calc(100% - 2vmin);
  transform: translateZ(calc(-0.5 * var(--t))) rotateY(60deg) ;
  transform-origin: 0% 50%;
  background: 
    linear-gradient(#777 0 0) 50% 34% / 20% 1%,
    repeating-linear-gradient(#ddd 0 7%, #0000 0 15%) 50% 38% / 30% 6%,
    linear-gradient(#fff 0 0) 50% 36% / 40% 10%,
    
    linear-gradient(#744f3b 2vmin, #0000 0 calc(100% - 2vmin), #744f3b 0),
    linear-gradient(to right, #744f3b 2vmin, #0000 0 calc(100% - 2vmin), #744f3b 0),
    linear-gradient(#cdf3 0 0)
    ;
  background-repeat: no-repeat;
}

.door .door-board > div {
  background: 
    linear-gradient(#744f3b 2vmin, #0000 0 calc(100% - 2vmin), #744f3b 0),
    linear-gradient(to right, #744f3b 2vmin, #0000 0 calc(100% - 2vmin), #744f3b 0),
    linear-gradient(#cdf3 0 0)
    ;
}

.door .door-board::after {
  background:
    #643f2b radial-gradient(gray 70%, #0000 0) no-repeat 50% 53% / 1vmin 1vmin;
}

.door-board span.cube {
  --h: 0;
  --s: 0%;
  --l: 80%;
  --d: 0.5vmin;
  --t: -3vmin;
  display: block;
  position: absolute;
}

.door-board span.cube.handle {
  top: 50%;
  right: 0.25vmin;
  width: 25%;
  height: 5%;
}

.door-board span.cube.handle > div {
  background:
    #eee radial-gradient(gray 70%, #0000 0) no-repeat 80% 53% / 1vmin 1vmin;
}

.door-board span.cube.neck {
  --d: 1.5vmin;
  --t: -1.75vmin;
  top: 50%;
  right: 0.25vmin;
  width: 5%;
  height: 5%;
}

.window {
  width: 30vmin;
  height: 45vmin;
  top: 20%;
  left: 3vmin;
  transform-style: preserve-3d;
  background:
    linear-gradient(45deg, #0000 70%, #fff2 0 75%, #0000 0 78%, #fff2 0 80%, #0000 0)
    ;
  background-color: #cdf3;
  
}

.window div {
  --d: 3vmin;
  --t: 1.5vmin;
  transform-style: preserve-3d;
}

.frame-top + .frame-top {
  bottom: 0;
}

.wall {
  width: 100%;
  height: 100%;
}

.wall .cube {
  --s: 10%;
  --l: 80%;
  --d: 4vmin;
  --t: 2vmin;
}

.wall .cube:nth-child(1) { width: 5%; height: 100%; }
.wall .cube:nth-c.........完整代码请登录后点击上方下载按钮下载查看