html - 如何使用 Css3 转换创建站立的 3D 文本效果

Question

我希望使用 CSS 3D 变换重新创建这样的效果:

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

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

是的，您的问题的解决方案是使用 transform-style: 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>