css实现三维文字翻转动画效果代码-html代码-BFW代码库

css实现三维文字翻转动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现三维文字翻转动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wdth@8..144,100;8..144,151&display=swap");

body {
  font-family: "Roboto Flex", "Segoe UI", -apple-system, BlinkMacSystemFont,
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.4;
  background-color: #000;
  color: #fff;
  background-image: linear-gradient(#444 0.1vw, transparent 0.1vw),
    linear-gradient(90deg, #444 0.1vw, transparent 0.1vw);
  background-size: 6vw 6vw;
  background-position: 50% -0.1vw;
}

#In {
  position: relative;
  box-sizing: border-box;
  width: 78vw;
  height:30vw;
  margin: 17.95vw auto 0 calc(50% - 38.95vw);
  background-color: #000;
  border: 0.1vw solid #444;
  perspective: 400vw;
  transform-style: preserve-3d;
}

#Best {
  display: block;
  margin: -8vw auto 0 auto;
  width: 50vw;
  height: 42vw;
  position: relative;
  overflow: visible;
  transform-style: preserve-3d;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

#Best p {
  display: block;
  width: 50vw;
  height: 42vw;
  perspective: 160vw;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

#Best a {
  display: block;
  perspective: 160vw;
}

#Best a:focus,
#Best a:hover,
#Best a:visited,
#Best a:active,
#Best a:link {
  text-decoration: none;
  color: #fff;
}

#Best a:focus,
#Best a:hover {
  outline: none;
}

.box {
  display: block;
  width: 50vw;
  height: 10vw;
  margin-top: 4vw;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-20vw) rotateX(30deg);
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: normal;
}

@media screen and (prefers-reduced-motion: no-preference) {
  #Best {
/*     animation-name: wobble; */
  }
  #Best p {
    animation-name: rock;
  }
  .box {
    animation-name: spin;
  }
}

.face {
  box-sizing: border-box;
  position: absolute;
  width: 50vw;
  height: 10vw;
  line-height: 0.55;
  font-size: 14.2vw;
  text-transform: uppercase;
  letter-spacing: 0em;
  overflow: hidden;
}

@supports (font-variation-settings: "wdth" 115) {
  .face {
    font-variation-settings: "wdth" 115;
    line-height: 0.75;
    transition: font-variation-settings ease-in 0.5s;
  }
}

#Best a:focus .face,
#Best a:hover .face {
  font-variation-settings: "wdth" 124.5;
}

#Best a:focus .face {
  outline: 0.3vw solid #0f0;
}

.face.fr {
  transform: rotateY(0deg) translateZ(5vw);
  back.........完整代码请登录后点击上方下载按钮下载查看