toruskit实现三维可交互插画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：toruskit实现三维可交互插画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

    <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap" rel="stylesheet">
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/toruskit.min.js"></script>
<style>
    body {
  background-color: #ededed;
  margin: 0;
  overflow: hidden;
  font-family: "Manrope", sans-serif;
}

.blue {
  --color: #0e1449;
}

.blue-light {
  --color: #c0c0cb;
}

.white {
  --color: #fff;
}

.yellow {
  --color: #ffc526;
}

.red {
  --color: #ff4b0f;
}

.green {
  --color: #008390;
}

.cyan {
  --color: #00c4c4;
}

.pink {
  --color: #f2c9d4;
}

.gray {
  --color: #ededed;
}

.perspective {
  --clamp: clamp(2rem, 15vw, 3.5rem);
  --x: 0;
  --y: 0;
  --z: 0;
  --scale: 1;
  --tall: 1;
  --wide: 1;
  --br: 2px;
  perspective: 10000rem;
  transform: translateX(50%) translateY(50%) rotateX(-5deg);
  transform-style: preserve-3d;
}

.perspective.active {
  --br: 20rem;
}

.r3d {
  transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
  transform-style: preserve-3d;
  transform-origin: left;
}

.flat {
  background-image: repeating-linear-gradient(-90deg, var(--color) 0, var(--color) 0.2rem, transparent 0.25rem, transparent 1.125rem);
}

.flat,
.cube {
  --size: calc(var(--clamp) * var(--scale));
  --tx: calc(var(--clamp) * var(--x));
  --ty: calc(var(--clamp) * var(--y));
  --tz: calc(var(--clamp) * var(--z));
  --rx: 0deg;
  --ry: 0deg;
  --rz: 0deg;
  --s: 1;
  --sz: 1;
  --anim-y: 0rem;
  --anim-z: 0rem;
  width: calc(var(--size) * var(--wide));
  height: calc(var(--size) * var(--tall));
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(var(--s)) scaleZ(var(--sz)) translateX(var(--tx)) translateY(calc(var(--ty) + var(--anim-y))) translateZ(calc(var(--tz) + var(--anim-z)));
  transform-origin: bottom;
  transform-style: preserve-3d;
  position: relative;
  border-radius: var(--br);
  transition: border-radius 1s;
}
.flat:not(:first-child),
.cube:not(:first-child) {
  position: absolute;
}

.cube {
  background-color: var(--color);
}

.cube::after {
  position: absolute;
  width: var(--size);
  height: calc(var(--size) * var(--tall));
  background-color: inherit;
  content: "";
  transform: rotateY(-90deg) translateX(calc((var(--size) / 2) * -1)) translateZ(calc(var(--size) / 2));
  background-image: inherit;
  left: 1px;
  border-radius: inherit;
}

.cube::before {
  position: absolute;
  width: calc(var(--size) * var(--wide));
  height: var(--size);
  background-color: inherit;
  content: "";
  transform: rotateX(-90deg) translateZ(calc((var(--size) / 2))) translateY(calc(var(--size) / 2));
  background-image: inherit;
  bottom: 1px;
  border-radius: inherit;
}

.text {
  transform: rotateX(-90deg) translateZ(7rem) translateX(-15rem);
  transform-style: preserve-3d;
  color: #fff;
  font-size: 2rem;
  position: absolute;
  white-space: nowrap;
}

.center {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.x2 {
  --scale: 2;
}

.tall {
  --tall: 2;
  --sz: -1;
  --rx: 90deg;
}

.small {
  --scale: 0.25;
}

.wide {
  --wide: 2;
}

#switch,
#made-with {
  background-color: rgba(40, 40, 40, 0.3);
  bottom: 0;
  color: #fff;
  display: flex;
  align-items: center;
  font-family: Inter, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 1rem;
  padding: 0.5rem 0.7rem;
  position: fixed;
  right: 0;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
#switch:after,
#made-with:after {
  margin-left: 0.5rem;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.........完整代码请登录后点击上方下载按钮下载查看