How to create a standing up 3D text effect with Css3 transforms

Question

I'm looking to recreate an effect like this with CSS 3D Transforms:

How do I achieve this? Here's what I've got so far

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>

I thought that if I rotated the background surface 60 degrees and rotated the text -60 degrees it would cancel out the effect but apparently not?

Anyway, thanks in advance.

Answer 1

Yes, ther solution to your problem is using transform-style: preserve-3d.

But the problem with this is that IE does not support this property

A way to make it work in IE is to use a pseudo element on the 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>

Answer 2

After a bit of research, I am confident to post my own answer.

This effect can be achieved using the transform-style property, and setting it to preserve-3d. This would be set to the parent element (in this case, .grid). I also use transform-origin:bottom to raise the text from inside the grid. Here's the snippet:

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); 
}

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