three+css实现一个三维排队直升机旋转动画效果代码-html代码-BFW代码库

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
.cuboid {
  width: 100%;
  height: 100%;
  position: relative;
}
.cuboid__side:nth-of-type(1) {
  height: calc(var(--thickness) * 1vmin);
  width: 100%;
  position: absolute;
  top: 0;
  transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
  width: 100%;
  height: calc(var(--thickness) * 1vmin);
  position: absolute;
  bottom: 0;
  transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
  position: absolute;
  top: 0;
  left: 0;
}
.cuboid__side:nth-of-type(6) {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
}
*,
*:after,
*:before {
  box-sizing: border-box;
  transform-style: preserve-3d;
  transition: background 0.25s;
}
:root {
  --base-size: 20;
  --helicopter-height: calc(var(--base-size) * 1vmin);
  --helicopter-width: calc(var(--helicopter-height) * 2);
  --helicopter-one: hsl(0, 0%, calc((60 + (var(--on, 0) * 35)) * 1%));
  --helicopter-two: hsl(0, 0%, calc((55 + (var(--on, 0) * 35)) * 1%));
  --helicopter-three: hsl(0, 0%, calc((50 + (var(--on, 0) * 35)) * 1%));
  --helicopter-four: hsl(0, 0%, calc((40 + (var(--on, 0) * 35)) * 1%));
  --chair-one: hsl(0, 0%, calc((20 + (var(--on, 0) * 15)) * 1%));
  --chair-two: hsl(0, 0%, calc((15 + (var(--on, 0) * 15)) * 1%));
  --chair-three: hsl(0, 0%, calc((10 + (var(--on, 0) * 15)) * 1%));
  --chair-four: hsl(0, 0%, calc((5 + (var(--on, 0) * 15)) * 1%));
  --dash-one: hsl(0, 0%, calc((50 + (var(--on, 0) * 15)) * 1%));
  --dash-two: hsl(0, 0%, calc((45 + (var(--on, 0) * 15)) * 1%));
  --dash-three: hsl(0, 0%, calc((40 + (var(--on, 0) * 15)) * 1%));
  --dash-four: hsl(0, 0%, calc((35 + (var(--on, 0) * 15)) * 1%));
  --accent-one: hsl(10, 60%, calc((30 + (var(--on, 0) * 35)) * 1%));
  --accent-two: hsl(10, 60%, calc((25 + (var(--on, 0) * 35)) * 1%));
  --accent-three: hsl(10, 60%, calc((20 + (var(--on, 0) * 35)) * 1%));
  --accent-four: hsl(10, 60%, calc((15 + (var(--on, 0) * 35)) * 1%));
  --rocket-one: hsl(1, 60%, calc((20 + (var(--on, 0) * 25)) * 1%));
  --rocket-two: hsl(1, 60%, calc((15 + (var(--on, 0) * 25)) * 1%));
  --rocket-three: hsl(1, 60%, calc((10 + (var(--on, 0) * 25)) * 1%));
  --rocket-four: hsl(1, 60%, calc((5 + (var(--on, 0) * 25)) * 1%));
  --screen-one: hsla(210, 80%, calc((25 + (var(--on, 0) * 25)) * 1%), 0.45);
  --screen-two: hsla(210, 80%, calc((25 + (var(--on, 0) * 25)) * 1%), 0.4);
  --screen-three: hsla(210, 80%, calc((25 + (var(--on, 0) * 25)) * 1%), 0.35);
  --screen-four: hsla(210, 80%, calc((25 + (var(--on, 0) * 25)) * 1%), 0.35);
  --bg: hsl(210, 80%, calc((15 + (var(--on, 0) * 75)) * 1%));
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  overflow: hidden;
  touch-action: none;
}
.scene {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 100vmin);
  transform: translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(44deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg));
}
.helicopter {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-20%, -50%);
}
.helicopter__wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: float 1s infinite linear;
          animation: float 1s infinite linear;
  height: var(--helicopter-height);
  width: var(--helicopter-width);
}
@-webkit-keyframes float {
  50% {
    transform: translate(-50%, -65%);
  }
}
@keyframes float {
  50% {
    transform: translate(-50%, -65%);
  }
}
.helicopter__base-light {
  --hue: 20;
  bottom: -6%;
  width: 6%;
  height: 6%;
  left: 47%;
  position: absolute;
}
.helicopter__tail-light {
  --hue: 15;
  top: -20%;
  width: 20%;
  height: 20%;
  position: absolute;
  left: 65%;
}
.helicopter__wing-light {
  --hue: 90;
  --speed: 0.4;
  top: -50%;
  width: 10%;
  height: 50%;
  position: absolute;
  left: 45%;
}
.helicopter__wing-light--left {
  transform: translate3d(0, 0, calc(var(--base-size) * 0.5vmin));
}
.helicopter__wing-light--right {
  transform: translate3d(0, 0, calc(var(--base-size) * -0.5vmin));
}
.helicopter > * {
  position: absolute;
}
.helicopter__rotor {
  top: 0;
  left: 30%;
  height: 14%;
  width: 8%;
}
.helicopter__cockpit {
  left: 0;
  top: 14%;
  width: 54%;
  height: 70%;
}
.helicopter__tail {
  top: 30%;
  height: 20%;
  width: 46%;
  left: 54%;
}
.helicopter__fin {
  right: 2%;
  top: 10%;
  height: 20%;
  width: 10%;
}
.helicopter__stabilizer {
  right: 2%;
  top: 30%;
  height: 10%;
  width: 10%;
}
.helicopter__skids {
  bottom: 0;
  left: 0;
  height: 6%;
  width: 70%;
}
.helicopter__wing {
  height: 6%;
  width: 22%;
  left: 28%;
  top: 60%;
}
.helicopter__launchers {
  height: 10%;
  width: 18%;
  left: 30%;
  top: 66%;
}
.helicopter__chair {
  position: absolute;
  left: 18%;
  top: 30%;
  width: 28%;
  height: 58%;
}
.helicopter__chair-back {
  position: absolute;
  width: 25%;
  right: 0;
  top: 0;
  height: 100%;
}
.helicopter__chair-bottom {
  position: absolute;
  height: 20%;
  right: 0;
  bottom: 0;
  width: 80%;
}
.helicopter__launcher {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.helicopter__launcher--left {
  transform: translate3d(0, 0, calc(var(--base-size) * -0.425vmin));
}
.helicopter__launcher--right {
  transform: translate3d(0, 0, calc(var(--base-size) * 0.425vmin));
}
.helicopter__triblade {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate3d(-25%, -75%, calc(var(--base-size) * 0.07vmin)) scale(1.25);
  border-radius: 50%;
  overflow: hidden;
  -webkit-animation: rotate-tri 0.2s infinite linear;
          animation: rotate-tri 0.2s infinite linear;
}
.helicopter__triblade:after,
.helicopter__triblade:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 15%;
  background: var(--chair-four);
  transform: translate(-50%, -50%);
}
.helicopter__triblade:after {
  transform: translate(-50%, -50%) rotate(90deg);
}
@-webkit-keyframes rotate-tri {
  to {
    transform: translate3d(-25%, -75%, calc(var(--base-size) * 0.07vmin)) scale(1.25) rotate(-360deg);
  }
}
@keyframes rotate-tri {
  to {
    transform: translate3d(-25%, -75%, calc(var(--base-size) * 0.07vmin)) scale(1.25) rotate(-360deg);
  }
}
.helicopter__blades {
  height: calc(var(--helicopter-height) * 2);
  width: calc(var(--helicopter-height) * 2);
  left: 34%;
  top: 0%;
  transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, 1px);
  border-radius: 50%;
  overflow: hidden;
  -webkit-animation: blades infinite 0.1s linear;
          animation: blades infinite 0.1s linear;
}
.helicopter__blades:after,
.helicopter__blades:before {
  content: '';
  height: 100%;
  width: 10%;
  background: linear-gradient(var(--chair-one) 0 5%, var(--accent-one) 5% 10%, var(--chair-one) 10% 90%, var(--accent-one) 90% 95%, var(--chair-one) 95% 100%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.helicopter__blades:after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.helicopter__skid {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.helicopter__skid:after,
.helicopter__skid:before {
  content: '';
  position: absolute;
  left: 16%;
  width: 4%;
  bottom: 0;
  height: 400%;
  background: var(--chair-four);
  transform-origin: 50% 100%;
  transform: rotateX(calc(25 * var(--coefficient, 1deg)));
}
.helicopter__skid:before {
  left: 56%;
}
.helicopter__skid--left {
  transform: translate3d(0, 0, calc(var(--base-size) * 0.4vmin));
}
.helicopter__skid--right {
  --coefficient: -1deg;
  transform: translate3d(0, 0, calc(var(--base-size) * -0.4vmin));
}
.helicopter__dashboard {
  position: absolute;
  left: 2%;
  top: 50%;
  width: 16%;
  height: 38%;
}
@-webkit-keyframes shift {
  0%, 10%, 90%, 100% {
    transform: translate(-20%, -50%) translate3d(0, 0, 0);
  }
  20%, 50% {
    transform: translate(-20%, -50%) translate3d(0, 0, 10vmin);
  }
  60%, 80% {
    transform: translate(-20%, -50%) translate3d(0, 0, -10vmin);
  }
}
@keyframes shift {
  0%, 10%, 90%, 100% {
    transform: translate(-20%, -50%) translate3d(0, 0, 0);
  }
  20%, 50% {
    transform: translate(-20%, -50%) translate3d(0, 0, 10vmin);
  }
  60%, 80% {
    transform: translate(-20%, -50%) translate3d(0, 0, -10vmin);
  }
}
.cuboid--cockpit {
  --thickness: calc(var(--base-size) * 0.6);
}
.cuboid--cockpit div {
  background: var(--helicopter-four);
}
.cuboid--cockpit div:nth-of-type(1) {
  background: linear-gradient(90deg, var(--screen-one) 0 50%, var(--helicopter-one) 50% 100%) 50% 50%/100% 100% no-repeat;
}
.cuboid--cockpit div:nth-of-type(2):after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: calc(100% - 1px);
  width: calc(100% - 1px);
  background: #914db3;
  transform: translate3d(-50%, -50%, calc(var(--helicopter-width) * -0.27));
}
.cuboid--cockpit div:nth-of-type(4) {
  background: transparent;
  background: linear-gradient(var(--screen-two) 0% 80%, var(--helicopter-one) 80% 100%) 50% 50%/100% 100% no-repeat;
}
.cuboid--cockpit div:nth-of-type(5) {
  background: transparent;
  background: linear-gradient(var(--helicopter-three), var(--helicopter-three)) 100% 50%/50% 100% no-repeat, linear-gradient(var(--screen-three) 0% 80%, var(--helicopter-three) 80% 100%) 0% 50%/50% 100% no-repeat;
}
.cuboid--cockpit div:nth-of-type(5):after {
  content: '';
  position: absolute;
  top: 50%;
  height: 50%;
  width: 25%;
  right: 15%;
  transform: translate3d(0%, -60%, 1px) scale(0.75);
  background: url("https://assets.codepen.io/605876/avatar.png");
  background-size: contain;
  background-repeat: no-repeat;
  filter: saturate(0.5);
}
.cuboid--cockpit div:nth-of-type(6) {
  background: transparent;
  background: linear-gradient(var(--helicopter-two), var(--helicopter-two)) 0 50%/50% 100% no-repeat, linear-gradient(var(--screen-four) 0% 80%, var(--helicopter-two) 80% 100%) 100% 50%/50% 100% no-repeat;
}
.cuboid--cockpit div:nth-of-type(6):after {
  content: '';
  position: absolute;
  top: 50%;
  height: 50%;
  width: 25%;
  left: 15%;
  transform: translate3d(0%, -60%, 1px) scale(0.75);
  background: url("https://assets.codepen.io/605876/avatar.png");
  background-size: contain;
  background-repeat: no-repeat;
  filter: saturate(0.5);
}
.cuboid--tail {
  --thickness: calc(var(--base-size) * 0.4);
  --clip: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
}
.cuboid--tail div {
  background: var(--accent-four);
}
.cuboid--tail div:nth-of-type(1) {
  background: var(--accent-one);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}
.cuboid--tail div:nth-of-type(2) {
  background: var(--accent-one);
  background: linear-gradient(90deg, transparent 0 40%, var(--accent-four) 40% 60%, transparent 60% 100%);
}
.cuboid--tail div:nth-of-type(3) {
  background: var(--accent-two);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}
.cuboid--tail div:nth-of-type(4) {
  background: var(--accent-three);
}
.cuboid--tail div:nth-of-type(5) {
  background: transparent;
}
.cuboid--tail div:nth-of-type(5):after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--accent-three);
  transform-origin: 0 50%;
  transform: rotateY(10deg);
}
.cuboid--tail div:nth-of-type(6) {
  background: transparent;
}
.cuboid--tail div:nth-of-type(6):after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--accent-three);
  transform-origin: 100% 50%;
  transform: rotateY(-10deg);
}
.cuboid--stabilizer {
  --thickness: calc(var(--base-size) * 0.4);
}
.cuboid--stabilizer div {
  background: var(--helicopter-four);
}
.cuboid--stabilizer div:nth-of-type(1) {
  background: var(--helicopter-one);
}
.cuboid--stabilizer div:nth-of-type(3) {
  background: var(--helicopter-two);
}
.cuboid--stabilizer div:nth-of-type(4) {
  background: var(--helicopter-three);
}
.cuboid--fin {
  --thickness: calc(var(--base-size) * 0.1);
}
.cuboid--fin div {
  background: var(--helicopter-four);
}
.cuboid--fin div:nth-of-type(1) {
  background: linear-gradient(90deg, transparent 0 50%, var(--helicopter-one) 50% 100%);
}
.cuboid--fin div:nth-of-type(3) {
  background: var(--helicopter-two);
}
.cuboid--fin div:nth-of-type(4) {
  background: transparent;
}
.cuboid--fin div:nth-of-type(4):after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--helicopter-two);
  height: 110%;
  width: 100%;
  transform-origin: 50% 100%;
  transform: rotateX(-24deg);
}
.cuboid--fin div:nth-of-type(5) {
  background: var(--helicopter-three);
  --clip: polygon(0 100%, 50% 0, 100% 0, 100% 100%);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}
.cuboid--fin div:nth-of-type(6) {
  background: var(--helicopter-three);
  --clip: polygon(0 0%, 50% 0, 100% 100%, 0 100%);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}
.cuboid--skid {
  --thickness: calc(var(--base-size) * 0.06);
}
.cuboid--skid div {
  background: var(--chair-four);
}
.cuboid--skid div:nth-of-type(1) {
  background: var(--chair-one);
}
.cuboid--skid div:nth-of-type(3) {
  background: var(--chair-two);
}
.cuboid--skid div:nth-of-type(4) {
  background: var(--chair-three);
}
.cuboid--dashboard {
  --thickness: calc(var(--base-size) * 0.52);
}
.cuboid--dashboard div {
  background: var(--dash-four);
}
.cuboid--dashboard div:nth-of-type(1) {
  background: var(--dash-one);
}
.cuboid--dashboard div:nth-of-type(3) {
  background: var(--dash-two);
}
.cuboid--dashboard div:nth-of-type(4) {
  background: var(--dash-three);
}
.cuboid--chair {
  --thickness: calc(var(--base-size) * 0.4);
}
.cuboid--chair div {
  background: var(--chair-four);
}
.cuboid--chair div:nth-of-type(1) {
  background: var(--chair-one);
}
.cuboid--chair div:nth-of-type(3) {
  background: var(--chair-two);
}
.cuboid--chair div:nth-of-type(4) {
  background: var(--chair-three);
}
.cuboid--wing {
  --thickness: calc(var(--base-size) * 1.1);
}
.cuboid--wing div {
  background: var(--accent-four);
}
.cuboid--wing div:nth-of-type(1) {
  background: var(--accent-one);
}
.cuboid--wing div:nth-of-type(3) {
  background: var(--accent-two);
}
.cuboid--wing div:nth-of-type(4) {
  background: var(--accent-three);
}
.cuboid--rotor {
  --thickness: calc(var(--base-size) * 0.14);
}
.cuboid--rotor div {
  background: var(--dash-four);
}
.cuboid--rotor div:nth-of-type(1) {
  background: var(--dash-one);
}
.cuboid--rotor div:nth-of-type(3) {
  background: var(--dash-two);
}
.cuboid--rotor div:nth-of-type(4) {
  background: var(--dash-three);
}
.cuboid--launcher {
  --thickness: calc(var(--base-size) * 0.08);
}
.cuboid--launcher div {
  background: var(--rocket-four);
}
.cuboid--launcher div:nth-of-type(1) {
  background: var(--rocket-one);
}
.cuboid--launcher div:nth-of-type(3) {
  background: var(--rocket-two);
}
.cuboid--launcher div:nth-of-type(4) {
  background: var(--rocket-three);
}
.cuboid--light {
  --thickness: calc(var(--base-size) * 0.035);
  -webkit-animation: flash calc((1 - var(--on, 0)) * (var(--speed, 1) * 1s)) infinite;
          animation: flash calc((1 - var(--on, 0)) * (var(--speed, 1) * 1s)) infinite;
}
.cuboid--light div {
  background: hsla(var(--hue, 10), 90%, 50%, var(--alpha, 0));
}
.helicopter__ammo {
  height: 50%;
  width: 30%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
.cuboid--ammo {
  --thickness: calc(var(--base-size) * 0.05);
}
.cuboid--ammo div {
  background: hsl(var(--hue), 80%, 80%);
}
button {
  height: 48px;
  width: 48px;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  cursor: pointer;
  transform: translate3d(0, 0, 150vmin);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  outline: transparent;
}
button > svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
button path {
  fill: hsl(210, 80%, calc((90 - (var(--on, 0) * 75)) * 1%));
}
button svg:nth-of-type(1),
button span:nth-of-type(1) {
  display: none;
.........完整代码请登录后点击上方下载按钮下载查看