Question

我在div中有一个图像或文本和一个画布元素。实际上，单击画布时将显示图像或文本，并且必须以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

这是什么意思？翻转元素，翻转并显示回来然后翻转并显示前面：

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

取自here

的样本

此代码将继续翻转画布和文本：

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

使用css翻转图像

1 个答案: