div+css实现三维风车旋转动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：div+css实现三维风车旋转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background-image: radial-gradient(#8caeaf, #4d6e6f);
  overflow: hidden;
  perspective: 1000px;
}
body:hover .scene {
  animation-play-state: paused;
}
body .scene, body .scene * {
  transform-style: preserve-3d;
}
body .scene {
  position: relative;
  width: 70vmin;
  height: 30vmin;
  transform: rotateX(-30deg) rotateY(10deg) scale3d(1, 1, 1);
  animation: rot 60s ease-in-out 2s infinite alternate;
}
@keyframes rot {
  from {
    transform: rotateX(-30deg) rotateY(10deg) scale(1, 1, 1);
  }
  to {
    transform: rotateX(5deg) rotateY(1040deg) scale3d(1, 1, 1);
  }
}
body .scene .cube, body .scene .cube *, body .scene .wedge, body .scene .wedge * {
  position: absolute;
  bottom: 0;
}
body .scene #ground {
  z-index: -100;
  width: 70vmin;
  height: 3vmin;
  transform: translateY(3vmin);
}
body .scene #ground .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene #ground .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene #ground .container .left {
  width: 70vmin;
  height: 3vmin;
  background-color: #3F6A2A;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-35vmin);
}
body .scene #ground .container .right {
  width: 70vmin;
  height: 3vmin;
  background-color: #3F6A2A;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-35vmin) translateZ(70vmin);
}
body .scene #ground .container .top {
  background-color: #4a7c31;
  width: 70vmin;
  height: 70vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(35vmin) translateZ(3vmin);
}
body .scene #ground .container .bottom {
  background-color: #4a7c31;
  width: 70vmin;
  height: 70vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(35vmin);
}
body .scene #ground .container .front {
  background-color: #2e4d1e;
  width: 70vmin;
  height: 3vmin;
  transform-origin: bottom left;
  transform: translateZ(35vmin);
}
body .scene #ground .container .back {
  background-color: #2e4d1e;
  width: 70vmin;
  height: 3vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(35vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene #ground .container .left, body .scene #ground .container .right, body .scene #ground .container .front, body .scene #ground .container .back {
  background-image: linear-gradient(180deg, #0000 0% 20%, #487C2F 20% 45%, #0000 45% 100%);
}
body .scene #ground .container .bottom {
  background-color: #E1B366;
  filter: drop-shadow(0 0 3.75rem black);
}
body .scene #ground .container .top {
  box-shadow: inset 0 0 15vmin #000a;
  background-image: radial-gradient(#0000, #0000 15vmin), repeating-linear-gradient(180deg, #0000 0% 50%, #0001 50% 100%), repeating-linear-gradient(90deg, #0000 0% 50%, #0001 50% 100%);
  background-size: 100%, 8em 8em, 8em 8em;
}
body .scene .windmill {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  transform: translate3d(42vmin, -7.5vmin, 0) scale(1.5);
}
body .scene .windmill .base, body .scene .windmill .bottom, body .scene .windmill .top, body .scene .windmill .fan, body .scene .windmill .ledge, body .scene .windmill .roof, body .scene .windmill .stairs,
body .scene .windmill .arms, body .scene .windmill .arm-1, body .scene .windmill .arm-2, body .scene .windmill .arm-3, body .scene .windmill .arm-4, body .scene .windmill .blade,
body .scene .windmill .cogs, body .scene .windmill .cog, body .scene .windmill .spindle {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
}
body .scene .windmill .base .container div {
  box-shadow: inset 0 0 0.5vmin #7E592488, inset 0 0 0 0.05vmin #0002;
}
body .scene .windmill .base #base-left {
  width: 2vmin;
  height: 2vmin;
  transform: translate3d(0, 0, 0);
}
body .scene .windmill .base #base-left .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .base #base-left .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .base #base-left .container .left {
  width: 14vmin;
  height: 2vmin;
  background-color: #CAAD8B;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-7vmin);
}
body .scene .windmill .base #base-left .container .right {
  width: 14vmin;
  height: 2vmin;
  background-color: #CAAD8B;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-7vmin) translateZ(2vmin);
}
body .scene .windmill .base #base-left .container .top {
  background-color: #d2b99d;
  width: 2vmin;
  height: 14vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(7vmin) translateZ(2vmin);
}
body .scene .windmill .base #base-left .container .bottom {
  background-color: #d2b99d;
  width: 2vmin;
  height: 14vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(7vmin);
}
body .scene .windmill .base #base-left .container .front {
  background-color: #bd996f;
  width: 2vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: translateZ(7vmin);
}
body .scene .windmill .base #base-left .container .back {
  background-color: #bd996f;
  width: 2vmin;
  height: 2vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(7vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-left .container .top {
  background-image: repeating-linear-gradient(to bottom, #0000 2vmin, #cfa776 2vmin 2.1vmin, #0000 2.1vmin 4vmin);
}
body .scene .windmill .base #base-right {
  width: 2vmin;
  height: 2vmin;
  transform: translate3d(12vmin, 0, 0);
}
body .scene .windmill .base #base-right .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .base #base-right .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .base #base-right .container .left {
  width: 14vmin;
  height: 2vmin;
  background-color: #CAAD8B;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-7vmin);
}
body .scene .windmill .base #base-right .container .right {
  width: 14vmin;
  height: 2vmin;
  background-color: #CAAD8B;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-7vmin) translateZ(2vmin);
}
body .scene .windmill .base #base-right .container .top {
  background-color: #d2b99d;
  width: 2vmin;
  height: 14vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(7vmin) translateZ(2vmin);
}
body .scene .windmill .base #base-right .container .bottom {
  background-color: #d2b99d;
  width: 2vmin;
  height: 14vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(7vmin);
}
body .scene .windmill .base #base-right .container .front {
  background-color: #bd996f;
  width: 2vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: translateZ(7vmin);
}
body .scene .windmill .base #base-right .container .back {
  background-color: #bd996f;
  width: 2vmin;
  height: 2vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(7vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-right .container .top {
  background-image: repeating-linear-gradient(to bottom, #0000 2vmin, #cfa776 2vmin 2.1vmin, #0000 2.1vmin 4vmin);
}
body .scene .windmill .base #base-front {
  width: 14vmin;
  height: 2vmin;
  transform: translate3d(0, 0, 6vmin);
}
body .scene .windmill .base #base-front .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .base #base-front .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .base #base-front .container .left {
  width: 2vmin;
  height: 2vmin;
  background-color: #CAAD8B;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .base #base-front .container .right {
  width: 2vmin;
  height: 2vmin;
  background-color: #CAAD8B;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-1vmin) translateZ(14vmin);
}
body .scene .windmill .base #base-front .container .top {
  background-color: #d2b99d;
  width: 14vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin);
}
body .scene .windmill .base #base-front .container .bottom {
  background-color: #d2b99d;
  width: 14vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .base #base-front .container .front {
  background-color: #bd996f;
  width: 14vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: translateZ(1vmin);
}
body .scene .windmill .base #base-front .container .back {
  background-color: #bd996f;
  width: 14vmin;
  height: 2vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-front .container .bottom::after {
  content: "";
  width: 14vmin;
  height: 14vmin;
  transform: translateY(6vmin);
  background-color: #d5b389;
  box-shadow: inset 0 0 6vmin #000, 0 0 3vmin 1vmin #000a;
}
body .scene .windmill .base #base-front .container .top {
  background-image: repeating-linear-gradient(to right, #0000 2vmin, #cfa776 2vmin 2.1vmin, #0000 2.1vmin 4vmin);
}
body .scene .windmill .base #base-back {
  width: 14vmin;
  height: 2vmin;
  transform: translate3d(0, 0, -6vmin);
}
body .scene .windmill .base #base-back .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .base #base-back .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .base #base-back .container .left {
  width: 2vmin;
  height: 2vmin;
  background-color: #CAAD8B;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .base #base-back .container .right {
  width: 2vmin;
  height: 2vmin;
  background-color: #CAAD8B;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-1vmin) translateZ(14vmin);
}
body .scene .windmill .base #base-back .container .top {
  background-color: #d2b99d;
  width: 14vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(1vmin) translateZ(2vmin);
}
body .scene .windmill .base #base-back .container .bottom {
  background-color: #d2b99d;
  width: 14vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .base #base-back .container .front {
  background-color: #bd996f;
  width: 14vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: translateZ(1vmin);
}
body .scene .windmill .base #base-back .container .back {
  background-color: #bd996f;
  width: 14vmin;
  height: 2vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-back .container .top {
  background-image: repeating-linear-gradient(to right, #0000 2vmin, #cfa776 2vmin 2.1vmin, #0000 2.1vmin 4vmin);
}
body .scene .windmill .base #base-left-inner {
  width: 1vmin;
  height: 1vmin;
  transform: translate3d(0.5vmin, -0.5vmin, 0);
}
body .scene .windmill .base #base-left-inner .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .base #base-left-inner .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .base #base-left-inner .container .left {
  width: 15vmin;
  height: 1vmin;
  background-color: #988065;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-7.5vmin);
}
body .scene .windmill .base #base-left-inner .container .right {
  width: 15vmin;
  height: 1vmin;
  background-color: #988065;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-7.5vmin) translateZ(1vmin);
}
body .scene .windmill .base #base-left-inner .container .top {
  background-color: #a38d74;
  width: 1vmin;
  height: 15vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(7.5vmin) translateZ(1vmin);
}
body .scene .windmill .base #base-left-inner .container .bottom {
  background-color: #a38d74;
  width: 1vmin;
  height: 15vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(7.5vmin);
}
body .scene .windmill .base #base-left-inner .container .front {
  background-color: #7f6b55;
  width: 1vmin;
  height: 1vmin;
  transform-origin: bottom left;
  transform: translateZ(7.5vmin);
}
body .scene .windmill .base #base-left-inner .container .back {
  background-color: #7f6b55;
  width: 1vmin;
  height: 1vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(7.5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-right-inner {
  width: 1vmin;
  height: 1vmin;
  transform: translate3d(12.5vmin, -0.5vmin, 0);
}
body .scene .windmill .base #base-right-inner .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .base #base-right-inner .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .base #base-right-inner .container .left {
  width: 15vmin;
  height: 1vmin;
  background-color: #988065;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-7.5vmin);
}
body .scene .windmill .base #base-right-inner .container .right {
  width: 15vmin;
  height: 1vmin;
  background-color: #988065;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-7.5vmin) translateZ(1vmin);
}
body .scene .windmill .base #base-right-inner .container .top {
  background-color: #a38d74;
  width: 1vmin;
  height: 15vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(7.5vmin) translateZ(1vmin);
}
body .scene .windmill .base #base-right-inner .container .bottom {
  background-color: #a38d74;
  width: 1vmin;
  height: 15vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(7.5vmin);
}
body .scene .windmill .base #base-right-inner .container .front {
  background-color: #7f6b55;
  width: 1vmin;
  height: 1vmin;
  transform-origin: bottom left;
  transform: translateZ(7.5vmin);
}
body .scene .windmill .base #base-right-inner .container .back {
  background-color: #7f6b55;
  width: 1vmin;
  height: 1vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(7.5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-front-inner {
  width: 15vmin;
  height: 1vmin;
  transform: translate3d(-0.5vmin, -0.5vmin, 6vmin);
}
body .scene .windmill .base #base-front-inner .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .base #base-front-inner .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .base #base-front-inner .container .left {
  width: 1vmin;
  height: 1vmin;
  background-color: #988065;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-0.5vmin);
}
body .scene .windmill .base #base-front-inner .container .right {
  width: 1vmin;
  height: 1vmin;
  background-color: #988065;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-0.5vmin) translateZ(15vmin);
}
body .scene .windmill .base #base-front-inner .container .top {
  background-color: #a38d74;
  width: 15vmin;
  height: 1vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin);
}
body .scene .windmill .base #base-front-inner .container .bottom {
  background-color: #a38d74;
  width: 15vmin;
  height: 1vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(0.5vmin);
}
body .scene .windmill .base #base-front-inner .container .front {
  background-color: #7f6b55;
  width: 15vmin;
  height: 1vmin;
  transform-origin: bottom left;
  transform: translateZ(0.5vmin);
}
body .scene .windmill .base #base-front-inner .container .back {
  background-color: #7f6b55;
  width: 15vmin;
  height: 1vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-back-inner {
  width: 15vmin;
  height: 1vmin;
  transform: translate3d(-0.5vmin, -0.5vmin, -6vmin);
}
body .scene .windmill .base #base-back-inner .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .base #base-back-inner .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .base #base-back-inner .container .left {
  width: 1vmin;
  height: 1vmin;
  background-color: #988065;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-0.5vmin);
}
body .scene .windmill .base #base-back-inner .container .right {
  width: 1vmin;
  height: 1vmin;
  background-color: #988065;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-0.5vmin) translateZ(15vmin);
}
body .scene .windmill .base #base-back-inner .container .top {
  background-color: #a38d74;
  width: 15vmin;
  height: 1vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(0.5vmin) translateZ(1vmin);
}
body .scene .windmill .base #base-back-inner .container .bottom {
  background-color: #a38d74;
  width: 15vmin;
  height: 1vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(0.5vmin);
}
body .scene .windmill .base #base-back-inner .container .front {
  background-color: #7f6b55;
  width: 15vmin;
  height: 1vmin;
  transform-origin: bottom left;
  transform: translateZ(0.5vmin);
}
body .scene .windmill .base #base-back-inner .container .back {
  background-color: #7f6b55;
  width: 15vmin;
  height: 1vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(0.5vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .base #base-left-inner .container .back, body .scene .windmill .base #base-left-inner .container .front, body .scene .windmill .base #base-right-inner .container .back, body .scene .windmill .base #base-right-inner .container .front {
  background-image: radial-gradient(circle, #0004 50%, #0000 50% 100%);
}
body .scene .windmill .base #base-back-inner .container .left, body .scene .windmill .base #base-back-inner .container .right, body .scene .windmill .base #base-front-inner .container .left, body .scene .windmill .base #base-front-inner .container .right {
  background-image: radial-gradient(circle, #0004 50%, #0000 50% 100%);
}
body .scene .windmill .stairs #stairs {
  z-index: 100;
  width: 2vmin;
  height: 2vmin;
  transform-origin: right bottom;
  transform: translate3d(5vmin, -0.1vmin, 9vmin) rotateY(90deg);
}
body .scene .windmill .stairs #stairs .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .stairs #stairs .container .base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(0.5vmin * 8);
  height: 4vmin;
  background-color: #cfa776;
  transform: rotateX(90deg) translateZ(calc(4vmin / -2));
}
body .scene .windmill .stairs #stairs .container .steps {
  position: relative;
  width: 100%;
  height: 100%;
  left: -0.5vmin;
  bottom: 0;
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(1) {
  position: absolute;
  left: calc(0.5vmin * 1);
  bottom: 0;
  width: 0.5vmin;
  height: calc(0.25vmin * 1);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(2) {
  position: absolute;
  left: calc(0.5vmin * 2);
  bottom: 0;
  width: 0.5vmin;
  height: calc(0.25vmin * 2);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(3) {
  position: absolute;
  left: calc(0.5vmin * 3);
  bottom: 0;
  width: 0.5vmin;
  height: calc(0.25vmin * 3);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(4) {
  position: absolute;
  left: calc(0.5vmin * 4);
  bottom: 0;
  width: 0.5vmin;
  height: calc(0.25vmin * 4);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(5) {
  position: absolute;
  left: calc(0.5vmin * 5);
  bottom: 0;
  width: 0.5vmin;
  height: calc(0.25vmin * 5);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(6) {
  position: absolute;
  left: calc(0.5vmin * 6);
  bottom: 0;
  width: 0.5vmin;
  height: calc(0.25vmin * 6);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(7) {
  position: absolute;
  left: calc(0.5vmin * 7);
  bottom: 0;
  width: 0.5vmin;
  height: calc(0.25vmin * 7);
}
body .scene .windmill .stairs #stairs .container .steps .step:nth-child(8) {
  position: absolute;
  left: calc(0.5vmin * 8);
  bottom: 0;
  width: 0.5vmin;
  height: calc(0.25vmin * 8);
}
body .scene .windmill .stairs #stairs .container .steps .step:last-child span:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4vmin;
  height: 100%;
  background-color: #c89a63;
  transform-origin: left;
  transform: rotateY(-90deg) translateZ(-0.5vmin);
}
body .scene .windmill .stairs #stairs .container .steps .step:last-child span:nth-child(1)::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.5vmin;
  width: calc(0.5vmin * 8);
  height: 4vmin;
  background-color: #c89a63;
  transform-origin: bottom left;
  transform: rotateY(180deg) rotateX(-90deg);
}
body .scene .windmill .stairs #stairs .container .steps .step:hover::before {
  filter: brightness(1.1);
  cursor: pointer;
}
body .scene .windmill .stairs #stairs .container .steps .step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5vmin;
  height: 4vmin;
  background-color: #DCBF9C;
  transform: rotateX(90deg) translateZ(calc(4vmin / 2));
}
body .scene .windmill .stairs #stairs .container .steps .step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4vmin;
  height: 0.25vmin;
  background-color: #cca26f;
  transform: rotateY(90deg) translateZ(calc(4vmin / -2));
}
body .scene .windmill .stairs #stairs .container .steps .step span {
  position: absolute;
  display: block;
  width: 0.5vmin;
  height: 100%;
  background-color: #cfa776;
}
body .scene .windmill .stairs #stairs .container .steps .step span:nth-child(1) {
  transform: translateZ(calc(4vmin / 2));
}
body .scene .windmill .stairs #stairs .container .steps .step span:nth-child(2) {
  transform: translateZ(calc(4vmin / -2));
}
body .scene .windmill .stairs #stairs .container .base {
  box-shadow: 0 0 3vmin black;
}
body .scene .windmill .bottom .container div {
  box-shadow: inset 0 0 0.5vmin #7E592488, inset 0 0 0 0.05vmin #0002;
}
body .scene .windmill .bottom .container .left, body .scene .windmill .bottom .container .right, body .scene .windmill .bottom .container .back, body .scene .windmill .bottom .container .front {
  background-image: radial-gradient(circle at 0.5vmin 0.5vmin, #0002 0.1vmin, #0000 0.1vmin), radial-gradient(circle at calc(100% - 0.5vmin) 0.5vmin, #0002 0.1vmin, #0000 0.1vmin), radial-gradient(circle at calc(100% - 0.5vmin) calc(100% - 0.5vmin), #0002 0.1vmin, #0000 0.1vmin), radial-gradient(circle at 0.5vmin calc(100% - 0.5vmin), #0002 0.1vmin, #0000 0.1vmin);
}
body .scene .windmill .bottom #bottom-left-back {
  width: 2vmin;
  height: 8vmin;
  transform: translate3d(2vmin, 0vmin, -4vmin);
}
body .scene .windmill .bottom #bottom-left-back .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .bottom #bottom-left-back .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .bottom #bottom-left-back .container .left {
  width: 2vmin;
  height: 8vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-left-back .container .right {
  width: 2vmin;
  height: 8vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-back .container .top {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(1vmin) translateZ(8vmin);
}
body .scene .windmill .bottom #bottom-left-back .container .bottom {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-left-back .container .front {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 8vmin;
  transform-origin: bottom left;
  transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-left-back .container .back {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 8vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-right-back {
  width: 2vmin;
  height: 8vmin;
  transform: translate3d(10vmin, 0vmin, -4vmin);
}
body .scene .windmill .bottom #bottom-right-back .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .bottom #bottom-right-back .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .bottom #bottom-right-back .container .left {
  width: 2vmin;
  height: 8vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-right-back .container .right {
  width: 2vmin;
  height: 8vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-right-back .container .top {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(1vmin) translateZ(8vmin);
}
body .scene .windmill .bottom #bottom-right-back .container .bottom {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-right-back .container .front {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 8vmin;
  transform-origin: bottom left;
  transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-right-back .container .back {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 8vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-left-front {
  width: 2vmin;
  height: 8vmin;
  transform: translate3d(2vmin, 0vmin, 4vmin);
}
body .scene .windmill .bottom #bottom-left-front .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .bottom #bottom-left-front .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .bottom #bottom-left-front .container .left {
  width: 2vmin;
  height: 8vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-left-front .container .right {
  width: 2vmin;
  height: 8vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-front .container .top {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(1vmin) translateZ(8vmin);
}
body .scene .windmill .bottom #bottom-left-front .container .bottom {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-left-front .container .front {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 8vmin;
  transform-origin: bottom left;
  transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-left-front .container .back {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 8vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-right-front {
  width: 2vmin;
  height: 8vmin;
  transform: translate3d(10vmin, 0vmin, 4vmin);
}
body .scene .windmill .bottom #bottom-right-front .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .bottom #bottom-right-front .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .bottom #bottom-right-front .container .left {
  width: 2vmin;
  height: 8vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-1vmin);
}
body .scene .windmill .bottom #bottom-right-front .container .right {
  width: 2vmin;
  height: 8vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-1vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-right-front .container .top {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(1vmin) translateZ(8vmin);
}
body .scene .windmill .bottom #bottom-right-front .container .bottom {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(1vmin);
}
body .scene .windmill .bottom #bottom-right-front .container .front {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 8vmin;
  transform-origin: bottom left;
  transform: translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-right-front .container .back {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 8vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(1vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-left-1 {
  width: 2vmin;
  height: 2vmin;
  transform: translate3d(2vmin, -2vmin, 0vmin);
}
body .scene .windmill .bottom #bottom-left-1 .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .bottom #bottom-left-1 .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .bottom #bottom-left-1 .container .left {
  width: 6vmin;
  height: 2vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-3vmin);
}
body .scene .windmill .bottom #bottom-left-1 .container .right {
  width: 6vmin;
  height: 2vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-1 .container .top {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 6vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-1 .container .bottom {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 6vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(3vmin);
}
body .scene .windmill .bottom #bottom-left-1 .container .front {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: translateZ(3vmin);
}
body .scene .windmill .bottom #bottom-left-1 .container .back {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 2vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-left-2 {
  width: 2vmin;
  height: 2vmin;
  transform: translate3d(2vmin, -4vmin, 0vmin);
}
body .scene .windmill .bottom #bottom-left-2 .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .bottom #bottom-left-2 .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .bottom #bottom-left-2 .container .left {
  width: 6vmin;
  height: 2vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-3vmin);
}
body .scene .windmill .bottom #bottom-left-2 .container .right {
  width: 6vmin;
  height: 2vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-2 .container .top {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 6vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-2 .container .bottom {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 6vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(3vmin);
}
body .scene .windmill .bottom #bottom-left-2 .container .front {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: translateZ(3vmin);
}
body .scene .windmill .bottom #bottom-left-2 .container .back {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 2vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-left-3 {
  width: 2vmin;
  height: 1vmin;
  transform: translate3d(2vmin, -6vmin, 0vmin);
}
body .scene .windmill .bottom #bottom-left-3 .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .bottom #bottom-left-3 .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .bottom #bottom-left-3 .container .left {
  width: 6vmin;
  height: 1vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-3vmin);
}
body .scene .windmill .bottom #bottom-left-3 .container .right {
  width: 6vmin;
  height: 1vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-left-3 .container .top {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 6vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(3vmin) translateZ(1vmin);
}
body .scene .windmill .bottom #bottom-left-3 .container .bottom {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 6vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(3vmin);
}
body .scene .windmill .bottom #bottom-left-3 .container .front {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 1vmin;
  transform-origin: bottom left;
  transform: translateZ(3vmin);
}
body .scene .windmill .bottom #bottom-left-3 .container .back {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 1vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg);
}
body .scene .windmill .bottom #bottom-right-1 {
  width: 2vmin;
  height: 2vmin;
  transform: translate3d(10vmin, -2vmin, 0vmin);
}
body .scene .windmill .bottom #bottom-right-1 .container {
  position: relative;
  width: 100%;
  height: 100%;
}
body .scene .windmill .bottom #bottom-right-1 .container * {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .scene .windmill .bottom #bottom-right-1 .container .left {
  width: 6vmin;
  height: 2vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(-90deg) translateX(-3vmin);
}
body .scene .windmill .bottom #bottom-right-1 .container .right {
  width: 6vmin;
  height: 2vmin;
  background-color: #DCBF9C;
  transform-origin: left top;
  transform: rotateY(90deg) translateX(-3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-right-1 .container .top {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 6vmin;
  transform-origin: bottom left;
  transform: rotateX(90deg) translateY(3vmin) translateZ(2vmin);
}
body .scene .windmill .bottom #bottom-right-1 .container .bottom {
  background-color: #e3cbaf;
  width: 2vmin;
  height: 6vmin;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateY(3vmin);
}
body .scene .windmill .bottom #bottom-right-1 .container .front {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 2vmin;
  transform-origin: bottom left;
  transform: translateZ(3vmin);
}
body .scene .windmill .bottom #bottom-right-1 .container .back {
  background-color: #d1ac7e;
  width: 2vmin;
  height: 2vmin;
  transform-origin: center;
  transform: rotateY(180deg) translateZ(3vmin) rotateX(180deg) rotateZ(180deg);
}
body.........完整代码请登录后点击上方下载按钮下载查看