文字悬停折叠倾斜效果

css部分

body {
  background-color: #fb9;
  color: #aaa;
  font-size: 40px;
}

.text {
  display: flex;
  justify-content: center;
  margin-top: 50vh;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  text-align: center;
  transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
}
.text:hover {
  -webkit-transform: rotateX(35deg), translateY(-50%);
          transform: rotateX(35deg), translateY(-50%);
}
.text:hover span {
  color: #ccc;
}
.text:hover span:nth-child(odd) {
  -webkit-transform: skewY(15deg);
          transform: skewY(15deg);
}
.text:hover span:nth-child(even) {
  -webkit-transform: skewY(-15deg);
          transform: skewY(-15deg);
  background-color: #f9f9f9;
  color: #a6a6a6;
}
.text > span {
  display: block;
  background-color: #fff;
  width: 120px;
  height: 120px;
  line-height: 120px;
  transition: color .3s ease-in-out, background-color .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
  transition: transform .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out, -webkit-transform .3s ease-in-out;
  box-shadow: 0 40px 50px rgba(0, 0, 0, 0.1);
}
.text > span:first-child {
  border-radius: 5px 0 0 5px;
}

HTML部分

<div class="text">
  <span>W</span>
  <span>a</span>
  <span>n</span>
  <span>g</span>
  <span>D</span>
  <span>a</span>
  <span>H</span>
  <span>a</span>
  <span>i</span>
</div>