HTML _CSS

3D Text Animation Effect

HiroDaegu 2022. 6. 27. 20:59
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D TEXT ANIMATION</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="box">
      <!-- 360 / 16 = 22.5deg -->
      <span style="--i:1"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:2"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:3"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:4"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:5"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:6"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:7"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:8"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:9"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:10"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:11"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:12"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:13"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:14"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:15"><i>Avengers</i><i>A</i>ssemble</span>
      <span style="--i:16"><i>Avengers</i><i>A</i>ssemble</span>
    </div>
  </div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #222;
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .box {
  transform-style: preserve-3d;
  animation: animate 25s linear infinite;
}

@keyframes animate {
  0% {
    transform: perspective(1000px) rotateX(0) rotate(25deg);
  }
  100% {
    transform: perspective(1000px) rotateX(360deg) rotate(25deg);
  }
}

.container .box span {
  position: absolute;
  color: #FFF;
  font-size: 3.5em;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 900;
  padding: 0 10px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .5), transparent);
  line-height: .76em;
  transform-style: preserve-3d;
  text-shadow: 0 5px 15px rgba(0, 0, 0, .25);
  transform: translate(-50%, -50%) rotateX(calc(var(--i) * 22.5deg)) translateZ(106px); 
}

.container .box span i:nth-child(1) {
font-style: inherit;
color: #FF246F;
}

.container .box span i:nth-child(2) {
font-style: inherit;
color: #12B5FF;
}
728x90
LIST