javascript - 使用CSS翻转图像

Question

我在 div 中有一个图像或文本和一个 Canvas 元素。最初，图像或文本将在单击 Canvas 时显示，必须以 css 翻转图像格式创建和显示

下面给出的是我用来尝试使用 css3 旋转 Canvas 文本的代码但我想不出错误

任何类型的输入都会有所帮助谢谢 http://jsfiddle.net/tLpemc1k/HTML: 这是正文

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>


</div>

CSS:

 <style type="text/css">
    .rotator canvas{
        -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
        -webkit

-transform: rotateY(0deg); 
    z-index

:100;
        position:absolute;
        top:0px;
        left:0px;
    }
    .rotator .clientimg{
        -webkit-transform: rotateY(180deg);   
        -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
        z-index: 50;
    }
    .clientimg,canvas
    {
     -webkit-transition: -webkit-transform 1s , z-index 0s 0.25s;
          -webkit-backface-visibility:hidden;
       -moz-backface-visibility:hidden;
        -ms-backface-visibility:hidden;
         -o-backface-visibility:hidden;
            backface-visibility:hidden;
    }
.clientimg
{
   z-index: 100;   
   -webkit-transform: rotateY(0deg);
}
canvas
{
   z-index: 50;   
   -webkit-transform: rotateY(180deg);

}
</style>

javascript:

 var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);

    $(".main").click(function(element){
    $(".main").addClass('rotator');
    });

Answer 1

你是这个意思吗？ Flipper 元素，先翻转显示后方，再翻转显示前方:

http://jsfiddle.net/tLpemc1k/7/

样本取自 here

此代码将不断翻转 Canvas 和文本:

$(".main").click(function(element){
    $(".main").toggleClass('rotator');
});