如何创建与CSS3直立的3D文字效果变换

我期待重新像这样用CSS 3D变换的效果： 3D text 如何创建与CSS3直立的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度，将取消出来的效果，但显然不是？

无论如何，在此先感谢。

来源

2015-05-03 hexagonest

使用伪元素如果''p''是''.grid''的子节点，你就无法达到这种效果。之所以会这样，是因为''p''的变换被渲染到''.grid''的3D表面上，所以你不能获得你想要的那种“站立”效果。你必须让他们的兄弟元素，并确保段落显示在网格顶部使用绝对定位。 –

是，疗法解决问题的方法是使用变换风格：保持-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>

来源

2015-05-03 06:07:27 vals

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

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

来源

2015-05-03 01:57:06 hexagonest

啊，很酷！然后，我收回上面的评论。我不知道“转换式”属性。 –

为了记录，不要使用'translateZ''（它需要知道段落的高度），你可以使用''transform-origin：bottom;''。它更容易和更通用的解决方案。 –

谢谢，将编辑帖子。 – hexagonest

如何创建与CSS3直立的3D文字效果变换

回答

相关问题