How to create a standing up 3D text effect with Css3 transforms
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>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>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>上一篇: 如何限制使用地理位置返回的结果？