我如何模仿這種旋轉的文字效果？

Question

我正在研究一個新項目，我想學習如何在此站點上模擬文本效果

http://papertiger.com/

我熟悉CSS轉換所涉及的向上旋轉文本，但我還沒有弄清楚它們是如何具有不同的文本字段的（例如，如何將其設置為在不同的單詞之間循環的位置）

由於文本每隔幾秒鍾更改一次，因此檢查該元素很有挑戰性，而我尋找解決方案的嘗試並未取得成果。

我並不需要解決這個問題。 如果有人能指出指導我的方向，該指南涵蓋了他們如何循環使用不同單詞的基本功能，將不勝感激。 謝謝！

Answer 1

您可以使用CSS3來實現。

• 旋轉（x軸）包含單詞的元素（例如div）
• 元素旋轉90度后，將元素值更改為另一個單詞
• 將元素旋轉回0度

Answer 2

演示： http ： //jsfiddle.net/DerekL/8ZLTc/

我相信這就是您想要的效果。

This is <div>
    <h3 class="front">FRONT</h3>
    <h3 class="back">BACK</h3>
</div>.

h3 {
    position: absolute;
    margin: 0;
    padding: 0;
    color: #ff4056;
    cursor: pointer;
}
div {
    position: relative;
    display: inline-block;
    width: 170px;
    height: 50px;
    margin: 0;
    padding: 0;
}
.front {
    z-index: 2;
}
body > * {
    vertical-align: text-bottom;
}

^*建議的JavaScript ：（使用Transit.js具有更好的可讀性。還有jQuery。）

$(".back").css({
    rotateX: '-180deg'
});

var words = [
    "useful", "interesting", "lorem", "ipsum",
    "stack", "overflow", "easter", "eggs"],
    angle = 0;

setInterval(function (){
    angle += 180;
    $('div').transition({
        perspective: '150px',
        rotateX: '+=180deg'
    }, 1000);

    var currentB = "." + ((angle / 180) % 2 ? "front" : "back"),
        current = "." + ((angle / 180) % 2 ? "back" : "front");
    $(current).html(words[(Math.random() * 8) | 0]);
    $("div").transition({
        width: $(current).width(),
        height: $(".front").height()
    });
}, 1000);

這適用於除IE之外的所有現代瀏覽器。