如何使用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可以实现此效果。这将设置为父元素（在本例中为.grid）。我还使用transform-origin:bottom从网格内部引发文本。这是片段：

＆＃13;

＆＃13;

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;
  transform-style:preserve-3d;
}
.grid p {
  transition: transform 1s;
  transform-origin:bottom;
  transform: rotateX(-60deg); 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;