纯css实现3d文字自转效果-html代码-BFW代码库

代码语言：html

所属分类：动画

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

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

<title> - 2000 Followers🥳 3D CSS text</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Quicksand:700&amp;display=swap'>

<style>
  body {
  display: grid;
  place-items: center;
  height: 100vh;
  background: #323133;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  -webkit-perspective: 60rem;
          perspective: 60rem;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
  overflow: hidden;
}
body #user-button {
  --user-button-background: #434A54;
  --user-button-text:white;
}
body .text {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
body .text > div {
  display: inline-block;
  position: relative;
  font-size: 35vmin;
  color: transparent;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: float 4s infinite;
          animation: float 4s infinite;
}
body .text > div:nth-child(1) {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
body .text > div:nth-child(2) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
body .text > div:nth-child(3) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
body .text > div:nth-child(4) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
body .text > div > div {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  text-shadow: 0 0 1px white;
}
body .text > div > div:not(:nth-child(n+3)), body .text > div > div:not(:nth-last-child(n+3)) {
  color: #ed5565;
  text-shadow: 0 0 1px #ed5565;
}
body .text > div > div:nth-child(1) {
  -webkit-transform: translateZ(-2.9166666667vmin);
          transform: translateZ(-2.9166666667vmin);
}
body .text > div > div:nth-child(2) {
  -webkit-transform: translateZ(-2.3333333333vmin);
          transform: translateZ(-2.3333333333vmin);
}
body .text > div > div:nth-child(3) {
  -webkit-transform: translateZ(-1.75vmin);
          transform: translateZ(-1.75vmin);
}
body .text > div > div:nth-child(4) {
  -webkit-transform: translateZ(-1.1666666667vmin);
          transform: translateZ(-1.1666666667vmin);
}
body .text > div > div:nth-child(5) {
  -webkit-transform: translateZ(-0.5833333333vmin);
          transform: translateZ(-0.5833333333vmin);
}
body .text > div > div:nth-child(6) {
  -webkit-transform: translateZ(0vmin);
          transform: translateZ(0vmin);
}
body .text > div > div:nth-child(7) {
  -webkit-transform: translateZ(0.5833333333vmin);
          transform: translateZ(0.5833333333vmin);
}
body .text > div > div:nth-child(8) {
  -webkit-transform: translateZ(1.1666666667vmin);
          transform: translateZ(1.1666666667vmin);
}
body .text > div > div:nth-child(9) {
  -webkit-transform: translateZ(1.75vmin);
          transform: translateZ(1.75vmin);
}
body .text > div > div:nth-child(10) {
  -webkit-transform: translateZ(2.3333333333vmin);
          transform: translateZ(2.3333333333vmin);
}
body .text > div > div:nth-child(11) {
  -webkit-transform: translateZ(2.9166666667vmin);
          transform: translateZ(2.9166666667vmin);
}
body .text > div > div:nth-child(12) {
  -webkit-transform: translateZ(3.5vmin);
          transform: translateZ(3.5vmin);
}

@-webkit-keyframes float {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 30deg);
            transform: rotate3d(0, 1, 0, 30deg);
  }
  1% {
    -webkit-transform: rotate3d(0.0627905195, 0.9980267284, 0, 30deg);
            transform: rotate3d(0.0627905195, 0.9980267284, 0, 30deg);
  }
  2% {
    -webkit-transform: rotate3d(0.1253332336, 0.9921147013, 0, 30deg);
            transform: rotate3d(0.1253332336, 0.9921147013, 0, 30deg);
  }
  3% {
    -webkit-transform: rotate3d(0.1873813146, 0.9822872507, 0, 30deg);
            transform: rotate3d(0.1873813146, 0.9822872507, 0, 30deg);
  }
  4% {
    -webkit-transform: rotate3d(0.2486898872, 0.9685831611, 0, 30deg);
            transform: rotate3d(0.2486898872, 0.9685831611, 0, 30deg);
  }
  5% {
    -webkit-transform: rotate3d(0.3090169944, 0.9510565163, 0, 30deg);
            transform: rotate3d(0.3090169944, 0.9510565163, 0, 30deg);
  }
  6% {
    -webkit-transform: rotate3d(0.3681245527, 0.9297764859, 0, 30deg);
            transform: rotate3d(0.3681245527, 0.9297764859, 0, 30deg);
  }
  7% {
    -webkit-transform: rotate3d(0.4257792916, 0.9048270525, 0, 30deg);
            transform: rotate3d(0.4257792916, 0.9048270525, 0, 30deg);
  }
  8% {
    -webkit-transform: rotate3d(0.4817536741, 0.87630668, 0, 30deg);
            transform: rotate3d(0.4817536741, 0.87630668, 0, 30deg);
  }
  9% {
    -webkit-transform: rotate3d(0.535826795, 0.8443279255, 0, 30deg);
            transform: rotate3d(0.535826795, 0.8443279255, 0, 30deg);
  }
  10% {
    -webkit-transform: rotate3d(0.5877852523, 0.8090169944, 0, 30deg);
            transform: rotate3d(0.5877852523, 0.8090169944, 0, 30deg);
  }
  11% {
    -webkit-transform: rotate3d(0.6374239897, 0.7705132428, 0, 30deg);
            transform: rotate3d(0.6374239897, 0.7705132428, 0, 30deg);
  }
  12% {
    -webkit-transform: rotate3d(0.6845471059, 0.7289686274, 0, 30deg);
            transform: rotate3d(0.6845471059, 0.7289686274, 0, 30deg);
  }
  13% {
    -webkit-transform: rotate3d(0.7289686274, 0.6845471059, 0, 30deg);
            transform: rotate3d(0.7289686274, 0.6845471059, 0, 30deg);
  }
  14% {
    -webkit-transform: rotate3d(0.7705132428, 0.6374239897, 0, 30deg);
            transform: rotate3d(0.7705132428, 0.6374239897, 0, 30deg);
  }
  15% {
    -webkit-transform: rotate3d(0.8090169944, 0.5877852523, 0, 30deg);
            transform: rotate3d(0.8090169944, 0.587785.........完整代码请登录后点击上方下载按钮下载查看