CSS3设置文字向屏幕内倾斜的效果

经常忘了向内倾斜的那个属性是什么, 记下来一下
试了一下有两种都可以实现
一. 设置在父级元素上设置perspective:100, 记得safari和谷歌Chrome浏览器要设置-webkit-perspective
然后在子元素设置rotateX
因为当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
perspective设置越小倾斜越明显

.testbox {
  border: 1px solid red;
  font-size: 40px;
  height: 50px;
  color: #000;
  perspective: 100px;
  -webkit-perspective: 100px; /* Safari and Chrome */
  > div {
    transform: rotateX(40deg);
    -webkit-transform: rotateX(40deg); /* Safari and Chrome */
  }
}

二.直接在父级元素上设置transform: perspective(100px) rotateX(30deg);
这是在网上搜到的方法

.testbox {
  border: 1px solid red;
  font-size: 40px;
  height: 50px;
  color: #000;
  transform: perspective(100px) rotateX(30deg)
}

效果是这样的: