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