如何創建與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

是，療法解決問題的方法是使用變換風格：保持-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>