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

【问题标题】：How can I mimic this rotating text effect?我怎样才能模仿这种旋转的文字效果？
【发布时间】：2014-02-19 01:18:36
【问题描述】：

我正在做一个新项目，我想学习如何在这个网站上模拟文字效果

http://papertiger.com/

我熟悉涉及向上旋转文本的 CSS 转换，但我还没有弄清楚它们如何具有不同的文本字段（例如，它们如何将其设置为循环遍历不同单词的位置）

由于文本每隔几秒钟就会更改一次，因此检查元素变得很困难，而且我寻找解决方案的尝试没有取得成果。

我不需要解决这个问题。如果有人可以向我指出一个教程的方向，该教程涵盖了他们如何循环使用不同单词的基本功能，我将不胜感激。谢谢！

【问题讨论】：

davidwalsh.name/css-flip

标签： javascript webkit transform

【解决方案1】：

您可以使用 CSS3 实现此目的。

旋转（x 轴）包含单词的元素（例如 div）
当元素旋转 90 度时，将元素值更改为另一个单词
将元素旋转回 0 度

【讨论】：

【解决方案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.

【讨论】：