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

纯css实现3d文字自转效果

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