我如何模仿这种旋转的文字效果？

Question

I am working on a new project, and I would like to learn how to emulate the text effect on this site

http://papertiger.com/

I am familiar with CSS transform involved rotating the text up, what I haven't figured out yet is how they have different text fields (as in, how do they set it to where it cycles through the different words)

Because the text changes every few seconds, it makes it challenging to inspect the element, and my attempts at searching for a solution have not been fruitful.

I don't need this solved necessarily. If someone could point me in the direction of a tutorial that covers the base functionality of how they cycle through the different words, It would be greatly appreciated. Thanks!

Answer 1

You can achieve this using CSS3.

• Rotate (x-axis) the element that holds the word (for example a div)
• When the element is rotated by 90 degrees then change the elements value to another word
• Rotate the element back to 0 degrees

Answer 2

Demo: http://jsfiddle.net/DerekL/8ZLTc/

I believe this is the effect you are going for.

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

^* Suggested JavaScript: ( Transit.js is used for better readability. And jQuery too.)

$(".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);

This works on all modern browsers, except IE.