我怎样才能模仿这种旋转文字效果？

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);

适用于所有现代浏览器except IE.