如何使用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

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

Answer 2

经过一番研究，我有信心发表自己的答案。

可以使用transform-style属性将其设置为preserve-3d来实现此效果。 这将设置为父元素（在本例中为.grid）。 我还使用transform-origin:bottom来从网格内部引发文本。 这是片段：

 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>