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

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

代码语言：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 lockin.........完整代码请登录后点击上方下载按钮下载查看