0

我想轻松翻转文本，就像这个页面正在做的那样：http: //papertiger.com/

我想尽可能简单地做到这一点，使用

-webkit-transition: 0s;
-webkit-transform rotateX(180deg)

这是我的代码：HTML：

<script>
$(document).ready(function() {
    Js.init();
});
</script>
<body>
<div id="flipbox">
    <p id="text">Front</p>
  </div>
</body>

JAVASCRIPT：

var Js = {
init: function() {
    var up=true;
    //do this every 5 seconds
    var i = window.setInterval( function(){
        up=!up;
        Js.rotate(up);
        //this will run just once after the timeout
        var j = window.setTimeout( function(){ 
            //Js.switchText(up);
        }, 1000 );
    }, 5000 );
},

rotate: function(up){
    if(up){
        $("#flipbox").removeClass('rotateDown');
        $("#flipbox").addClass('rotateUp');
    }else{
        $("#flibox").removeClass('rotateUp');
        $("#flipbox").addClass('rotateDown');
    }
},

switchText: function(up) {
    if(up){
        $("#text").text('front');
    }else{
        $("#text").text('back');
    }
}
}

CSS：

#flipbox{
    color: green;
    display: block;
    font-size: 70px;
    perspective: 800px;
    perspective-origin: 50% 100px;
}

.rotateDown{
    transition: 2s;
    -webkit-transform: rotateX(180deg);
}
.rotateUp{
    transition: 2s;
    -webkit-transform: rotateX(0deg);
}
.upSideDown{
    -webkit-transition: 0s;
    -webkit-transform: rotate(180deg);
}

就像现在一样，我可以根据需要旋转文本“First”。切换文本并将其旋转 Y 180 度（使其可读，因为它现在颠倒了），不起作用，这就是该行被注释的原因。

所以，我想我需要让文本旋转 X 和 Y 180 度，我该怎么做？rotate3d(1,1,0,180deg)不能那样工作。如果我先写rotateX，然后写rotateY，第一个会被覆盖。

...或者是我应该寻找的jQuery插件flippy somthing？

我试图制作一个jsfiddle。它不起作用，但可以在这里找到：http: //jsfiddle.net/EdNVw/

提前感谢您的任何建议！

4

0 回答 0