如何使用Css3转换创建站立式3D文字效果

我正在使用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>

---

是的，解决您的问题的方法是使用transform-style：preserve-3d。

但问题在于IE不支持这个属性

一种使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>

---

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

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

链接地址: http://www.djcxy.com/p/26039.html

上一篇: How to create a standing up 3D text effect with Css3 transforms

下一篇: Generate dump/explain files of Menhir when using ocamlbuild