如何使用Css3变换创建一个站立的3D文本效果

Question

我想用CSS 3D Transforms重新创建这样的效果:

我该如何实现这一目标？这是我到目前为止所得到的

body {
  perspective: 400px;
  transition: perspective 1s;
}
.grid {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("http://i.imgur.com/3ACizko.jpg");
  background-size: cover;
  height: 400px;
  width: 400px;
  transform: rotateX(60deg);
  margin: 0 auto;
  transition: transform 1s;
  perspective: 400px;
}
.grid p {
  transition: transform 1s;
  transform: rotateX(-60deg);
}

<div class="grid">
  <p>Hello</p>
</div>

我想如果我将背景表面旋转60度并旋转文字-60度它会取消效果,但显然不是？

无论如何,提前谢谢.

Answer 1

是的，您的问题的解决方案是使用转换样式：preserve-3d。

但这样做的问题是IE不支持这个属性

使其在 IE 中工作的一种方法是在 p 上使用伪元素

.grid {
  font-size: 30px;
  position: relative;
  left: 100px;
  top: 200px;
  perspective: 200px;
  perspective-origin: 0% 50%;
 }

.grid:after {
  content: "";
  position: absolute;
  width: 300px;
  height: 200px;
  top: -100px;
  left: -100px;
  transform: rotateX(30deg);
  background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 47px, black 47px, black 50px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 47px, black 47px, black 50px);
  }

<p class="grid">Hello</p>