div+css实现三维小猫立体旋转动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：div+css实现三维小猫立体旋转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body {
  margin: 0;
}

.scene {
  transform-style: preserve-3d;
}

.scene *, .scene *::before {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  transform-origin: top left;
}

.scene *::before {
  content: '';
  width: 100%; height: 100%;
}

.cat {
  top: 65vh; left: 50vw;
  width: 414em; height: 702em;
  transform-origin: center;
  transform: translateX(-50%) rotateX(75deg) rotateZ(0turn);
  font-size: min(.03vh, .03vw);
  --color: #615656;
  --color: #0baadc;
  animation: cat 10s linear infinite;
}
@keyframes cat {
  50% { transform: translateX(-50%) rotateX(75deg) rotateZ(-180deg); }
	100% { transform: translateX(-50%) rotateX(75deg) rotateZ(-360deg); }
}

.cat::before {
  background-color: color-mix(in oklch, var(--color), black 70%);
  clip-path: polygon(137em 0, 50% 47em, calc(100% - 137em) 0, calc(100% - 86em) 70em, calc(100% - 100em) 198em, 100% 247em, calc(100% - 137em) 100%, 137em 100%, 0% 247em, 100em 198em, 86em 70em);
}

.cat-1 {
  left: 137em; top: 100%;
  width: 140em; height: 111em;
  transform: rotateX(2deg);
}

.cat-1::before {
  background-color: hsl(0 0% 11% / 1);
  clip-path: polygon(0% 0%, 100% 0%, 64% 100%);
}

.cat-1-1 {
  left: 90em; top: 100%;
  width: 146em; height: 145em;
  transform: rotateZ(141deg) rotateY(-86.92deg);
}

.cat-1-1::before {
  background-color: color-mix(in oklch, var(--color), black 33%);
  clip-path: polygon(0% 0.2%, 91% 0%, 100% 100%, 0% 98.4%);
}

.cat-1-1-1 {
  left: 133em;
  width: 119em; height: 145em;
  transform: rotateZ(-5deg) rotateY(-88.9deg);
}

.cat-1-1-1::before {
  background-color: color-mix(in oklch, var(--color), black 25%);
  clip-path: polygon(0% 0%, 100% 32.5%, 0% 100%);
}

.cat-1-1-2 {
  left: 133em;
  width: 135em; height: 176em;
  transform: rotateZ(-180.2deg) rotateX(34.7deg);
}

.cat-1-1-2::before {
  background-color: color-mix(in oklch, var(--color), black 37%);
  clip-path: polygon(0% 0%, 99% 0%, 100% 99%, 16% 100%);
}

.cat-1-1-2-1 {
  left: 133em;
  width: 120em; height: 174em;
  transform: rotateZ(-0.5deg) rotateY(-87.2deg);
}

.cat-1-1-2-1::before {
  background-color: hsl(0 0% 12% / 1);
  clip-path: polygon(0% 0%, 100% 9.5%, 86.1% 76.3%, 0% 100%);
}

.cat-1-1-2-2 {
  width: 177em; height: 124em;
  transform: rotateZ(83deg) rotateX(85.6deg);
}

.cat-1-1-2-2::before {
  background-color: color-mix(in oklch, var(--color), black 24%);
  clip-path: polygon(0% 0%, 100% 0%, 75% 87%, 15.5% 100%);
}

.cat-1-1-2-2-1 {
  left: 27em; top: 100%;
  width: 125em; height: 145em;
  transform: rotateZ(-8.8deg) rotateX(95.2deg);
}

.cat-1-1-2-2-1::before {
  background-color: color-mix(in oklch, var(--color), black 32%);
  clip-path: polygon(0% 0%, 86% 0%, 100% 90%, 7% 100%);
}

.cat-1-1-2-3 {
  left: 21em; top: 100%;
  width: 114em; height: 238em;
  transform: rotateZ(-0.8deg) rotateX(54deg);
}

.cat-1-1-2-3::before {
  background-color: color-mix(in oklch, var(--color), black 39%);
  clip-path: polygon(0.5% 0%, 100% 0%, 98% 100%, 37% 100%);
}

.cat-1-1-2-3-1 {
  left: 100%;
  width: 97em; height: 237em;
  transform: rotateZ(0.8deg) rotateY(-86.6deg);
}

.cat-1-1-2-3-1::before {
  background-color: hsl(0 0% 13% / 1);
  clip-path: polygon(0% 0%, 97% 25.3%, 74% 80.1%, 0% 100%);
}

.cat-1-1-2-3-2 {
  left: 1em;
  width: 242em; height: 101em;
  transform: rotateZ(80deg) rotateX(76.3deg);
}

.cat-1-1-2-3-2::before {
  background-color: color-mix(in oklch, var(--color), black 22%);
  clip-path: polygon(0% 0%, 100% 0%, 85% 73%, 24% 100%);
}

.cat-1-1-2-3-2-1 {
  left: 58em; top: 100%;
  width: 155em; height: 128em;
  transform: rotateZ(-10.5deg) rotateX(103.4deg);
}

.cat-1-1-2-3-2-1::before {
  background-color: color-mix(in oklch, var(--color), black 27%);
  clip-path: polygon(0% 0%, 97% 0%, 100% 75.7%, 17% 100%);
}

.cat-1-1-2-3-3 {
  left: 43em; top: 100%;
  width: 68em; height: 188em;
  transform: rotateX(65deg);
}

.cat-1-1-2-3-3::before {
  background-color: color-mix(in oklch, var(--color), black 34%);
  clip-path: polygon(0% 0%, 100% 0%, 97.8% 100%);
}

.cat-1-1-2-3-3-1 {
  width: 199em; height: 71em;
  transform: rotateZ(70.5deg) rotateX(56.6deg);
}

.cat-1-1-2-3-3-1::before {
  background-color: color-mix(in oklch, var(--color), black 19%);
  clip-path: polygon(0% 0%, 100% 0%, 20.5% 100%);
}

.cat-1-1-2-3-3-1-1 {
  left: 100%;
  width: 89em; height: 174em;
  transform: rotateZ(66deg) rotateY(-105.9deg);
}

.cat-1-1-2-3-3-1-1::before {
  background-color: color-mix(in oklch, var(--color), black 23%);
  clip-path: polygon(0% 0%, 100% 77%, 0% 100%);
}

.cat-1-1-2-3-3-2 {
  left: 100%;
  width: 74em; height: 188em;
  transform: rotateZ(0.5deg) rotateY(-86.1deg);
}

.cat-1-1-2-3-3-2::before {
  background-color: hsl(0 0% 14% / 1);
  clip-path: polygon(0% 0%, 100% 24%, 0% 100%);
}

.cat-2 {
  left: 100%; top: 247em;
  width: 286em; height: 475em;
  transform: rotateZ(16.75deg) rotateY(-66deg);
}

.cat-2::before {
  background-color: color-mix(in oklch, var(--color), black 35%);
  clip-path: polygon(0% 0%, 0% 100%, 100% 159em);
}

.cat-2-1 {
  top: 100%;
  width: 442em; height: 148em;
  transform: rotateZ(-47.85deg) rotateX(28deg);
}

.cat-2-1::before {
  background-color: color-mix(in oklch, var(--color), black 32%);
  clip-path: polygon(0% 0%, 21% 76%, 100% 100%, 96.45% 0%);
}

.cat-2-1-1 {
  left: 93em; top: 112.5em;
  width: 432em; height: 305em;
  transform: rotateZ(5.8deg) rotateX(15deg);
}

.cat-2-1-1::before {
  background-color: color-mix(in oklch, var(--color), black 27%);
  clip-path: polygon(0% 0%, 81.2% 0%, 100% 100%);
}

.cat-2-1-1-1 {
  left: 100%; top: 100%;
  width: 184em; height: 533em;
  transform: rotateZ(125.25deg) rotateY(-43.8deg);
}

.cat-2-1-1-1::before {
  background-color: color-mix(in oklch, var(--color), black 23%);
  clip-path: polygon(0% 0%, 100% 1%, 84% 100%, 0% 99.2%);
}

.cat-2-1-1-1-1 {
  left: 100%; top: 5em;
  width: 202em; height: 529em;
  transform: rotateZ(3.2deg) rotateY(-43.8deg);
}

.cat-2-1-1-1-1::before {
  background-color: color-mix(in oklch, var(--color), black 27%);
  clip-path: polygon(0% 0%, 100% 45.9%, 0% 100%);
}

.cat-2-1-1-1-2 {
  width: 172em; height: 185em;
  transform: rotateZ(-88.4deg) rotateY(-38deg);
}

.cat-2-1-1-1-2::before {
  background-color: color-mix(in oklch, var(--color), black 16%);
  clip-path: polygon(0% 0%, 100% 26%, 100% 74%, 0% 100%);
}

.cat-2-1-1-1-2-1 {
  left: 100%; top: 49em;
  width: 321em; height: 373em;
  transform: rotateZ(-164.3deg) rotateX(68.1deg);
}

.cat-2-1-1-1-2-1::before {
  background-color: color-mix(in oklch, var(--color), black 20%);
  clip-path: polygon(0% 0%, 55.8% 0%, 100% 76%, 35% 100%);
}

.cat-2-1-1-1-2-2 {
  left: 100%; top: 137em;
  width: 371em; height: 321em;
  transform: rotateZ(74.3deg) rotateY(-68.5deg);
}

.cat-2-1-1-1-2-2::before {
  background-color: color-mix(in oklch, var(--color), black 20%);
  clip-path: polygon(0% 0%, 0% 56%, 76.1% 100%, 100% 36.3%);
}

.cat-2-1-1-1-2-3 {
  left: 100%; top: -12em;
  width: 195em; height: 209em;
  transform: rotateY(-14.7deg);
}

.cat-2-1-1-1-2-3::before {
  background-color: color-mix(in oklch, var(--color), black 20%);
  clip-path: polygon(0% 29%, 100% 0%, 100% 100%, 0% 71%);
}

.cat-2-1-1-1-2-3-1 {
  top: 29%;
  width: 384em; height: 355em;
  transform: rotateZ(-107.2deg) rotateY(-66.7deg);
}

.cat-2-1-1-1-2-3-1::before {
  background-color: color-mix(in oklch, var(--color), black 23%);
  clip-path: polygon(0% 0%, 100% 18.9%, 82.8% 67.5%, 57% 100%, 0% 57.4%);
}

.cat-2-1-1-1-2-3-1-1 {
  left: 220em; top: 100%;
  width: 255em; height: 175em;
  transform: rotateZ(-50.2deg) rotateX(41.9deg);
}

.cat-2-1-1-1-2-3-1-1::before {
  background-color: color-mix(in oklch, var(--color), black 20%);
  clip-path: polygon(0% 0%, 60.6% 0%, 100% 100%, 25.5% 90.5%);
}

.cat-2-1-1-1-2-3-1-1-1 {
  left: 66em; top: 158em;
  width: 190em; height: 198em;
  transform: rotateZ(5deg) rotateX(68.4deg);
}

.cat-2-1-1-1-.........完整代码请登录后点击上方下载按钮下载查看