使用css翻转图像

flip image using css

本文关键字：图像 翻转 css 使用      更新时间：2023-09-26

我在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');
    });

这就是你的意思吗？翻转器元素，翻转并显示背面，然后翻转并显示正面：

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

从这里提取的样品

此代码将不断翻转画布和文本：

$(".main").click(function(element){
    $(".main").toggleClass('rotator');
});
相关文章：