Question

我喜欢轻松翻转文字，就像这个页面正在做的那样：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”旋转。要切换文本并将其旋转180度（使其可读，因为它现在颠倒），不起作用，这就是该行被评论的原因。

所以，我认为我需要将文字旋转X和Y 180度，我该怎么做？ rotate3d(1,1,0,180deg)不起作用。如果我写rotateX后跟rotateY，第一个会被覆盖。

...或者是jQuery插件，我应该寻找什么？

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

感谢您提出建议！

在X和Y中翻转/旋转文本

0 个答案: