[英]How to create a standing up 3D text effect with Css3 transforms
我想用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度它會取消效果但顯然不是?
無論如何,提前謝謝。
是的,您的問題的解決方案是使用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>
經過一番研究,我有信心發表自己的答案。
可以使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.