纯css实现3d汽车360度旋转动画效果-html代码-BFW代码库

代码语言：html
所属分类：三维
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>CSSYBERTRUCK</title>

<style>
  *, *:before, *:after {
  box-sizing: border-box;
  position: relative;
  -webkit-animation-play-state: var(--play-state, paused) !important;
          animation-play-state: var(--play-state, paused) !important;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

:root {
  --color-top: #E7EEF6;
  --color-glass: rgba(0, 0, 0, 0.6);
  --c-top: #DAE0E4;
  --c-side: #778189;
  --c-bottom: #444246;
  --c-bumper: #111;
  --speed: 2s;
  --duration: 30s;
}

label[for="animation"] {
  position: absolute;
  height: 2rem;
  color: white;
  top: 0;
  left: calc(1.5rem + 20px);
  line-height: 2rem;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

#animation {
  position: absolute;
  width: 20px;
  height: 2rem;
  top: 0;
  left: 1rem;
}

label[for="animation"], #animation {
  opacity: 0.3;
  transition: opacity .3s;
  cursor: pointer;
}
label[for="animation"]:hover, #animation:hover {
  opacity: 0.9;
}

#animation:checked ~ * {
  --play-state: 'running';
}

#cybertruck {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  --ry: 0deg;
  width: 340px;
  height: 930px;
  -webkit-transform: rotateX(80deg) rotateZ(calc(var(--rz, 0) * 1turn));
          transform: rotateX(80deg) rotateZ(calc(var(--rz, 0) * 1turn));
  -webkit-animation: cybertruck var(--duration) linear infinite;
          animation: cybertruck var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
@-webkit-keyframes cybertruck {
  from {
    -webkit-transform: rotateX(80deg) rotateZ(0turn);
            transform: rotateX(80deg) rotateZ(0turn);
  }
  to {
    -webkit-transform: rotateX(80deg) rotateZ(1turn);
            transform: rotateX(80deg) rotateZ(1turn);
  }
}
@keyframes cybertruck {
  from {
    -webkit-transform: rotateX(80deg) rotateZ(0turn);
            transform: rotateX(80deg) rotateZ(0turn);
  }
  to {
    -webkit-transform: rotateX(80deg) rotateZ(1turn);
            transform: rotateX(80deg) rotateZ(1turn);
  }
}
#cybertruck .highlight {
  border-left: 5px solid green;
  border-top: 5px solid red;
}
#cybertruck:before {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  width: 0;
  height: 100%;
  -webkit-transform: translateZ(-195px) scale(3, 1.2);
          transform: translateZ(-195px) scale(3, 1.2);
  box-shadow: 0 0 150px 50px rgba(0, 0, 0, 0.5);
}

.side {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  position: absolute;
  top: 0;
  width: 140px;
  height: 930px;
  left: 0;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotateY(var(--ry)) translateX(-100%) rotateZ(-2deg);
          transform: rotateY(var(--ry)) translateX(-100%) rotateZ(-2deg);
}
.side.-left {
  --ry: -90deg;
}
.side.-left:before {
  -webkit-animation: side-left var(--duration) linear infinite;
          animation: side-left var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes side-left {
  from, to {
    background: #8B898D;
    border-color: #4D5055;
  }
  50% {
    background: #A0A5A9;
    border-color: #5D6369;
  }
  75% {
    background: #676E76;
    border-color: #454244;
  }
}
@keyframes side-left {
  from, to {
    background: #8B898D;
    border-color: #4D5055;
  }
  50% {
    background: #A0A5A9;
    border-color: #5D6369;
  }
  75% {
    background: #676E76;
    border-color: #454244;
  }
}
.side.-right {
  --ry: -90deg;
}
.side.-right:before {
  -webkit-animation: side-right var(--duration) linear infinite;
          animation: side-right var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes side-right {
  from, to {
    background: #7C726F;
    border-color: #73645B;
  }
  25% {
    background: #4B5665;
    border-color: #34373E;
  }
  50%, 75% {
    background: #545A61;
    border-color: #454952;
  }
}
@keyframes side-right {
  from, to {
    background: #7C726F;
    border-color: #73645B;
  }
  25% {
    background: #4B5665;
    border-color: #34373E;
  }
  50%, 75% {
    background: #545A61;
    border-color: #454952;
  }
}
.side:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--c-side);
  border-left: 50px solid;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 905px, 40px 820px, 90px 785px, 90px 695px, 30px 645px, 0px 635px, 0px 210px, 30px 200px, 115px 155px, 115px 45px, 50px 21px, 100% 0, 0px 0%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 905px, 40px 820px, 90px 785px, 90px 695px, 30px 645px, 0px 635px, 0px 210px, 30px 200px, 115px 155px, 115px 45px, 50px 21px, 100% 0, 0px 0%);
}
.side.-right {
  left: 100%;
}
.side.-right > .bumper {
  -webkit-transform: translateZ(-5px);
          transform: translateZ(-5px);
}
.side > .bumper {
  position: absolute;
  left: 0;
  bottom: 280px;
  height: 450px;
  width: 25px;
  background-color: var(--c-bumper);
  -webkit-transform: translateZ(5px);
          transform: translateZ(5px);
  -webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px));
          clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px));
}

.side.-left .bumper {
  -webkit-animation: side-left-bumper var(--duration) linear infinite;
          animation: side-left-bumper var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes side-left-bumper {
  from, to, 50% {
    background: #3F4245;
  }
  75%, 80% {
    background: #000;
  }
  90% {
    background: #2C2C2D;
  }
}
@keyframes side-left-bumper {
  from, to, 50% {
    background: #3F4245;
  }
  75%, 80% {
    background: #000;
  }
  90% {
    background: #2C2C2D;
  }
}
.side.-right .bumper {
  -webkit-animation: side-right-bumper var(--duration) linear infinite;
          animation: side-right-bumper var(--duration) linear infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
          animation-delay: calc(-1 * var(--duration) * var(--rz, 0));
}
@-webkit-keyframes side-right-bumper {
  from, to {
    background: #3F3129;
  }
  25% {
    background: #000;
  }
  50% {
    background: #34343C;
  }
}
@keyframes side-right-bumper {
  from, to {
    background: #3F3129;
  }
  25% {
    background: #000;
  }
  50% {
    background: #34343C;
  }
}
.well {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  height: 100px;
  position: absolute;
  width: 20px;
  --ry: 30deg;
}
.well.-front {
  left: 105px;
  top: 50px;
}
.well.-back {
  left: 80px;
  top: 685px;
}
.well:before, .well:after, .well .well-plate {
  background-color: var(--c-bumper);
}
.well:before, .well:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.well:before {
  bottom: 100%;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-clip-path: polygon(0 calc(100% - 10px), 0 0, 100% 0%, 100% 100%);
          clip-path: polygon(0 calc(100% - 10px), 0 0, 100% 0%, 100% 100%);
}
.well:after {
  top: 100%;
  -webkit-transform-origin: top right;
          transform-origin: top right;
  -webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 100%);
}
.well > .well-plate {
  -webkit-transform-origin: right center;
          transform-origin: right center;
  -webkit-transform: rotateY(var(--ry));
          transform: rotateY(var(--ry));
  -webkit-clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px));
          clip-path: polygon(0 10px, 100% 0, 100% 100%, 0 calc(100% - 10px));
}
.well.-front:before {
  -webkit-transform: rotateZ(-60deg) rotateY(var(--ry));
          transform: rotateZ(-60deg) rotateY(var(--ry));
  -webkit-clip-path: polygon(0 calc(100% - 10px), 0 40px, 100% 0%, 100% 100%);
          clip-path: polygon(0 calc(100% - 10px), 0 40px, 100% 0%, 100% 100%);
}
.well.-front:after {
  height: 140px;
  -webkit-transform: rotateZ(60deg) rotateY(var(--ry));
          transform: rotateZ(60deg) rotateY(var(--ry));
  -webkit-clip-path: polygon(0 10px, 100% 0px, 100% 100%, 10px 100%, 0 calc(100% - 40px));
          clip-pat.........完整代码请登录后点击上方下载按钮下载查看