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-2-3-1-1-1::before {
  background-color: color-mix(in oklch, var(--color), black 13%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 76.3%, 38.3% 100%);
}

.cat-2-1-1-1-2-3-1-1-1-1 {
  left: 73em; top: 100%;
  width: 152em; height: 55em;
  transform: rotateZ(-21.9deg) rotateX(27deg);
}

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

.cat-2-1-1-1-2-3-2 {
  top: 71%;
  width: 355em; height: 384em;
  transform: rotateZ(17.2deg) rotateX(66.7deg);
}

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

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

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

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

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

.cat-2-1-1-1-2-3-2-1-1-1 {
  left: 100%; top: 73em;
  width: 55em; height: 152em;
  transform: rotateZ(21.9deg) rotateY(-27deg);
}

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

.cat-2-1-1-1-2-3-3 {
  left: 100%; top: -3em;
  width: 252em; height: 215em;
  transform: rotateY(59deg);
}

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

.cat-2-1-1-1-2-3-3-1 {
  left: 100%;
  width: 253em; height: 147em;
  transform: rotateZ(-180.8deg) rotateX(60deg);
}

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

.cat-2-1-1-1-2-3-3-2 {
  left: 100%; top: 100%;
  width: 147em; height: 253em;
  transform: rotateZ(90.8deg) rotateY(-60deg);
}

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

.cat-2-1-1-1-2-3-3-3 {
  left: 100%;
  width: 215em; height: 215em;
  transform: rotateY(-18.3deg);
}

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

.cat-2-1-1-1-2-3-3-3-1 {
  left: 100%; top: 40em;
  width: 120em; height: 135em;
  transform: rotateY(-74deg);
}

.cat-2-1-1-1-2-3-3-3-1::before {
  background-color: color-mix(in oklch, var(--color), white 10%);
  clip-path: polygon(0% 0%, 100% 17.5%, 100% 82.5%, 0% 100%);
}

.cat-2-1-1-1-2-3-3-3-1-1 {
  top: 100%;
  width: 153em; height: 239em;
  transform: rotateZ(-11.3deg) rotateX(54.2deg);
}

.cat-2-1-1-1-2-3-3-3-1-1::before {
  left: -52em; width: 205em;
  background-color: color-mix(in oklch, var(--color), white 5%);
  clip-path: polygon(25.5% 0%, 0% 45%, 42.4% 100%, 100% 43%, 84.9% 0%);
}

.cat-2-1-1-1-2-3-3-3-1-1-1 {
  left: 35em; top: 100%;
  width: 179em; height: 80em;
  transform: rotateZ(-49.1deg) rotateX(13deg);
}

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

.cat-2-1-1-1-2-3-3-3-1-1-1-1 {
  width: 184em; height: 143em;
  transform: rotateZ(34.2deg) rotateX(43.55deg);
}

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

.cat-2-1-1-1-2-3-3-3-1-2 {
  width: 239em; height: 153em;
  transform: rotateZ(-78.7deg) rotateY(-54.2deg);
}

.cat-2-1-1-1-2-3-3-3-1-2::before {
  top: -52em; height: 205em;
  background-color: color-mix(in oklch, var(--color), white 5%);
  clip-path: polygon(0% 25.5%, 45% 0%, 100% 42.4%, 43% 100%, 0% 84.9%);
}

.cat-2-1-1-1-2-3-3-3-1-2-1 {
  left: 100%; top: 35em;
  width: 80em; height: 179em;
  transform: rotateZ(49.1deg) rotateY(-13deg);
}

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

.cat-2-1-1-1-2-3-3-3-1-2-1-1 {
  width: 143em; height: 184em;
  transform: rotateZ(-34.2deg) rotateY(-43.55deg);
}

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

.cat-2-1-1-1-2-3-3-3-1-3 {
  left: 100%; top: 24em;
  width: 76em; height: 88em;
  transform: rotateY(-41deg);
}

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

.cat-2-1-1-1-2-3-3-3-1-3-1 {
  top: 100%;
  width: 88em; height: 96em;
  transform: rotateZ(-30.5deg) rotateX(22deg);
}

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

.cat-2-1-1-1-2-3-3-3-1-3-2 {
  width: 96em; height: 88em;
  transform: rotateZ(-59.5deg) rotateY(-22deg);
}

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

.cat-2-1-1-1-2-3-3-3-2 {
  top: 100%;
  width: 227em; height: 177em;
  transform: rotateZ(-10.5deg) rotateX(-34deg);
}

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

.cat-2-1-1-1-2-3-3-3-2-1 {
  left: 100%; top: 100%;
  width: 177em; height: 113em;
  transform: rotateZ(-93deg) rotateX(168deg);
}

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

.cat-2-1-1-1-2-3-3-3-2-1-1 {
  width: 175em; height: 87em;
  transform: rotateZ(40.4deg) rotateX(-57.9deg);
}

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

.cat-2-1-1-1-2-3-3-3-2-1-1-1 {
  left: 100%;
  width: 150em; height: 119em;
  transform: rotateZ(43deg) rotateY(3.6deg);
}

.cat-2-1-1-1-2-3-3-3-2-1-1-1::before {
  background-color: color-mix(in oklch, var(--color), white 10%);
  clip-path: polygon(0% 0%, 100% 18%, 0% 100%);
}
.cat-2-1-1-1-2-3-3-3-3-1-1 {
  width: 87em; height: 175em;
  transform: rotateZ(-40.4deg) rotateY(57.9deg);
}

.cat-2-1-1-1-2-3-3-3-3-1-1::before {
  background-color: color-mix(in oklch, var(--color), white 3%);
  clip-path: polygon(0% 0%, 0% 100%, 100% 54%);
}
.cat-2-1-1-1-2-3-3-3-3-1-1-1 {
  top: 100%;
  width: 119em; height: 150em;
  transform: rotateZ(-43deg) rotateX(-3.6deg);
}

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

.cat-2-1-1-1-2-3-3-3-2-2 {
  width: 287em; height: 70em;
  transform: rotateZ(38deg) rotateX(42.5deg);
}

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

.cat-2-1-1-1-2-3-3-3-2-2-1 {
  width: 140em; height: 149em;
  transform: rotateZ(29.9deg) rotateX(46deg);
}

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

.cat-2-1-1-1-2-3-3-3-2-2-1-1 {
  width: 224em; height: 92em;
  left: 19em; top: 100%;
  transform: rotateZ(-50.9deg) rotateX(42.7deg);
}

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

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