html,body{margin:0;padding:0;height:100%;}
body{
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-align-items:center;
      -ms-flex-align:center;
          align-items:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center;
  background-color:#684da3;
}
p{color:#fff;font-size:1em;font-weight:bold;font-family:"微软雅黑";}

p span {
  display:inline-block;
  position:relative;
  -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
  -webkit-perspective:500;
          perspective:500;
  -webkit-font-smoothing:antialiased;
}
p span::before,
p span::after {
  display:none;
  position:absolute;
  top:0;
  left:-1px;
  -webkit-transform-origin:left top;
      -ms-transform-origin:left top;
          transform-origin:left top;
  -webkit-transition:all ease-out 0.3s;
          transition:all ease-out 0.3s;
  content:attr(data-text);
}
p span::before {
  z-index:1;
  color:rgba(0,0,0,0.2);
  -webkit-transform:scale(1.1, 1) skew(0deg, 20deg);
      -ms-transform:scale(1.1, 1) skew(0deg, 20deg);
          transform:scale(1.1, 1) skew(0deg, 20deg);
}
p span::after {
  z-index:2;
  color:#684da3;
  text-shadow:-1px 0 1px #684da3, 1px 0 1px rgba(0,0,0,0.8);
  -webkit-transform:rotateY(-40deg);
          transform:rotateY(-40deg);
}
p span:hover::before {
  -webkit-transform:scale(1.1, 1) skew(0deg, 5deg);
      -ms-transform:scale(1.1, 1) skew(0deg, 5deg);
          transform:scale(1.1, 1) skew(0deg, 5deg);
}
p span:hover::after {
  -webkit-transform:rotateY(-10deg);
          transform:rotateY(-10deg);
}
p span + span {
  margin-left:0.1em;
}
@media (min-width:20em) {
  p {
    font-size:2em;
  }
  p span::before,
  p span::after {
    display:block;
  }
}
@media (min-width:30em) {
  p {
    font-size:3em;
  }
}
@media (min-width:40em) {
  p {
    font-size:5em;
  }
}
@media (min-width:60em) {
  p {
    font-size:8em;
  }
}