CODEWITHSUNDEEP
javascriptjquerycss
Andre
Andre

Reputation: 839

Rotate image horizontally onClick

This works vertically but I am trying to rotate horizontally by clicking on the image. Can not figure this out! Or there might be an easier way of doing this as well.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flip Image</title>
        <style>
            canvas{border:1px solid #333}
            img{display:none;}
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">      </script>
        <script type="text/javascript">
            $(window).load(function(){

                var immagine = $('img')[0]
                alt=immagine.height
                lar=immagine.width
                $('<canvas width="'+lar+'" height="'+alt+'"></canvas>').appendTo('body')
                var ca=$('canvas').get(0)
                ctx=ca.getContext('2d')
                ctx.drawImage(immagine, 0, 0);

                $('canvas').click(function(){
                    ctx.translate(lar-1, alt-1);
                    ctx.rotate(Math.PI);
                    ctx.drawImage(immagine, 0, 0, lar, alt);
                 })

            })
        </script>
    </head>
    <body>
        <!-- onclick rotate image horizontally-->
        <img src="myimage.jpg">

        <br><Br>

    </body>
</html>

Thanks!

Upvotes: 0

Views: 2531

Answers (3)

zahid ullah
zahid ullah

Reputation: 371

check that jsfiddle may it help 

.imageRotateHorizontal{
    -moz-animation: spinHorizontal .8s infinite linear;
    -o-animation: spinHorizontal .8s infinite linear;    
    -webkit-animation: spinHorizontal .8s infinite linear;
    animation: spinHorizontal .8s infinite linear;
}

@keyframes spinHorizontal {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

http://jsfiddle.net/AB277/7/

Upvotes: 0

Rajesh Dhiman
Rajesh Dhiman

Reputation: 1896

You can rotate image to any angle by just a simple mathematical logic. For example if you want to rotate image to 90 degree. Just use:

ctx.rotate(90 * Math.PI/180);

You can set your desired angle in above code and rotate image.

UPDATE I am adding some code according to your needs. that works on canvas click and this will rotate image in one direction. 

var angleInDegrees=0;

$('canvas').click(function(){
   angleInDegrees+=90;
    drawRotated(angleInDegrees);
 })
function drawRotated(degrees){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(canvas.width/2,canvas.height/2);
    ctx.rotate(degrees*Math.PI/180);
    ctx.drawImage(image,-image.width/2,-image.width/2);
    ctx.restore();
}

Upvotes: 1

XNull
XNull

Reputation: 15

I agree to Rajesh's comment, you can set your angle and that will rotate according to the translation performed prior to that. I'd prefer using webkit over canvas sometimes. Here is a fiddle that does the rotation horizontally using CSS webkit, it's much simpler in my opinion. Horizontal Rotation Using Webkit

.rotate  img{
-webkit-transform: rotateY(180deg);   
-webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
z-index: -2; }

Upvotes: 0

Related Questions