div+css实现三维古埃及锁结构模型效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：div+css实现三维古埃及锁结构模型效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:root {
  --speed: 10s;
}

* {
  transform-style: preserve-3d;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  perspective: 100vmin;
  background: radial-gradient(circle at 50% 80%, #772f1a, #f2a65a);
}

.content {
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  transform: rotateY(0deg) rotateX(0deg);
  transition: all 0.5s ease 0s;
  animation: start 4.5s ease 0.5s;
}

@keyframes start {
  20%, 25% {
    transform: rotateY(25deg) rotateX(5deg);
  }
  65%, 70% {
    transform: rotateY(-25deg) rotateX(-5deg);
  }
  85% {
    transform: rotateY(-5deg) rotateX(5deg);
  }
}
.cuboid {
  --width: 10;
  --height: 10;
  --depth: 10;
  --hue: 15;
  --sat: 25%;
  height: calc(var(--height) * 1vmin);
  width: calc(var(--width) * 1vmin);
  position: absolute;
  right: 0;
  top: 0;
}

.side {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid #0004;
  transition: all 1s ease 0s;
}

.side:nth-of-type(1) {
  transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 55%);
}

.side:nth-of-type(2) {
  transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg);
  background: hsl(var(--hue), var(--sat), 25%);
}

.side:nth-of-type(3) {
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 45%);
}

.side:nth-of-type(4) {
  width: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 35%);
}

.side:nth-of-type(5) {
  height: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 40%);
}

.side:nth-of-type(6) {
  height: calc(var(--depth) * 1vmin);
  transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc(var(--height) * 0.5vmin));
  background: hsl(var(--hue), var(--sat), 30%);
}

/*** BASE ***/
.base {
  width: 56vmin;
  height: 80vmin;
  left: 10vmin;
  position: absolute;
}

.base1 {
  --width: 56;
  --height: 80;
  --depth: 1;
  transform: translateZ(-3vmin);
}

.base2 {
  --width: 8;
  --height: 48;
  --depth: 5;
  left: 0;
  transform: translateZ(5vmin);
}

.base3 {
  --width: 8;
  --height: 16;
  --depth: 5;
  left: 0;
  bottom: 0;
  top: initial;
  transform: translateZ(5vmin);
}

.base4 {
  --width: 8;
  --height: 80;
  --depth: 5;
  left: 0;
  bottom: 0;
  top: initial;
}

.cuboid.base1 .side:nth-of-type(1) {
  filter: brightness(0.75);
  box-shadow: 0 -3vmin 3vmin 0 #0008 inset;
}

.fixed .cuboid {
  --width: 8;
  --height: 80;
  --depth: 5;
}

.fixed .cuboid + .cuboid {
  --height: 16;
  transform: translateZ(5vmin);
}

.fixed .cuboid.f3 {
  top: 32vmin;
}

.fixed .cuboid.f4 {
  top: 64vmin;
}

.fixed {
  position: absolute;
  left: 24vmin;
}

.fixed + .fixed {
  left: 40vmin;
}

.fixed + .fixed + .fixed {
  left: 56vmin;
}

/*** LOCKING ***/
.locking {
  position: absolute;
  left: 15.75vmin;
  top: 6vmin;
  animation: locking-move var(--speed) ease-in-out 0s infinite;
  animation-fill-mode: forwards;
}

.locking .cuboid {
  --width: 7.5;
  --depth: 5;
  transform: translateZ(5vmin);
  --height: 10;
}

.cuboid.lock2 {
  --height: 22;
  top: 26vmin;
}

.cuboid.lock3 {
  --height: 48;
  transform: translateZ(0vmin);
}

.locking + .locking {
  left: 31.75vmin;
}

.locking + .locking + .locking {
  left: 47.75vmin;
}

.locking .cuboid .side {
  filter: brightness(0.35);
}

@keyframes locking-move {
  0%, 12.5%, 75%, 100% {
    top: 6vmin;
  }
  25%, 62.5% {
    top: 0vmin;
  }
}
/*** BOLT ***/
.bolt {
  position: absolute;
  width: 86vmin;
  height: 10vmin;
  bottom: 16vmin;
  left: -10vmin;
  animation: bolt-move var(--speed) ease-in-out 0s infinite;
  animation-fill-mode: forwards;
}

.bolt .cuboid {
  --width: 86;
  transform: translateZ(5vmin);
  --depth: 5;
}

.bolt .cuboid + .cuboid {
  --width: 8;
  --height: 6;
  left: 10vmin;
  top: -5.75vmin;
  position: absolute;
}

.cuboid.b1 {
  left: -6vmin;
}

.cuboid.b2 {
  --width: 24 !important;
  left: -6vmin !important;
}

.cuboid.b3 {
  left: 26vmin !important;
}

.cuboid.b4 {
  left: 42vmin !important;
}

.bolt .cuboid + .cuboid .side:nth-child(1) {
  border-bottom-color: #fff0;
}

.cuboid.b5 {
  left: 58vmin !important;
  --width: 22 !important;
}

.cuboid.b6 {
  left: 79.5vmin !important;
  --height: 25 !important;
  top: -10.25vmin !important;
  --width: 6 !important;
}

.bolt .cuboid.b6 .side:nth-child(1) {
  border-left-color: #fff0;
}

.cuboid.b6 .side {
  border-radius: 3px;
}

.bolt .cuboid .side {
  filter: brightness(0.6);
}

@keyframes bolt-move {
  0%, 25%, 62.5%, 100% {
    left: -10vmin;
  }
  37.5%, 50% {
    left: 6vmin;
  }
}
/*** KEY ***/
.key {
  position: absolute;
  width: 69vmin;
  height: 15vmin;
  top: 16.25vmin;
  left: 55vmin;
  position: absolute;
  animation: key-move var(--speed) ease-in-out 0s infinite;
}

.key .cuboid {
  transform: translateZ(5vmin);
  --depth: 5;
  --width: 62;
  left: 8.25vmin;
  top: 9.5vmin;
  --height: 6;
}

.cuboid.k2 {
  --width: 47.6;
  top: 6vmin;
  --height: 3.75;
  transform: translateZ(5.01vmin);
}

.cuboid.k2 .side:nth-child(1) {
  border-bottom-color: #fff0;
}

.key .cuboid + .cuboid + .cuboid {
  --width: 7.5;
  top: 0.125vmin;
  --height: 6.125;
  transform: translateZ(5.01vmin);
}

.key .cuboid + .cuboid + .cuboid .side:nth-child(1) {
  border-bottom-color: #fff0;
}

.cuboid.k3 .side:nth-of-type(4),
.cuboid.k2 .side:nth-of-type(4) {
  border-color: #fff0;
}

.cuboid.k4 {
  left: 24.25vmin;
}

.cuboid.k5 {
  left: 40.35vmin;
}

.cuboid.k6 {
  left: 69.5vmin;
  --width: 6 !important;
  top: 7.65vmin !important;
  --height: 9.5 !important;
}

.cuboid.k6 .side:nth-child(1) {
  border-left-color: #fff0;
}

.cuboid.k6 .side {
  border-radius: 3px;
}

.key .cuboid .side {
  filter: brightness(1.75);
}

.cuboid.k1 .side:nth-of-type(6),
.cuboid.k6 .side:nth-of-type(6) {
  filter: none;
}

@keyframes key-move {
  0%, 87.5%, 100% {
    left: 61vmin;
  }
  12.5%, 75% {
    left: 0;
    top.........完整代码请登录后点击上方下载按钮下载查看