2

I want to rotate a picture, in a way that it would work like tympanus's swatchbook.
But i rather not use, et CSS 3, as the previous link would require.
I rather do all the rotation on js, using, per instance, JQueryRotate, which is great except the rotation point, that is centered on te image.

Rather than point out a library that does it, I'd like to learn a good rotating method for an image, and specially, how do I change the point of the rotation, in that method, so I can achieve the swatchbook effect that i want.

But if you know a library that does it, I'd like it very much as well.

thanks

Edit:

While writing the question I realized something. I could enlarge the holder of that image. althoug is not very bright nor elegant, or very good, it is a start. I am going to check the sugestion made by x3ro : Image rotation algorithm

html snippet:

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<div id="dvImg" style="position:relative;border: 1px solid black;">
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image" style="position:absolute;top:0;left:12px;margin:auto;border: 1px solid black;">
<div>

js snippet:

$("#dvImg").width($("#image").width()*2);
$("#dvImg").height($("#image").height()*2);
$("#image").css({ left: $("#image").width() + "px", top: $("#image").height()});

$("#image").mouseover(function() {
    $("#dvImg").rotate({animateTo:90});
});
Community
  • 1
  • 1
marcelo-ferraz
  • 3,147
  • 4
  • 38
  • 55
  • You could of course just take a look in the JQueryRotate code and see how they are doing it. You'll then see that they use CSS 3 with an alternative method especially for IE. If it's enough "not CSS3", that's what you can do. Otherwise you should be asking yourself if it is possible at all. – Jasper Nov 01 '12 at 14:53
  • While I was writing the question something of a dummy answer got to me. I updated the question with a possible solution. It is still very dummy. – marcelo-ferraz Nov 01 '12 at 15:20
  • lol, wait until I write the whole thing – marcelo-ferraz Nov 01 '12 at 15:29
  • This solution isn't a solution at all. JQueryRotate is meant for rotating images. It uses CSS 3 where possible and provides an image-only solution for old IE. CSS 3 can be used on elements other than images, so this solution only works when you have CSS 3. – Jasper Nov 01 '12 at 15:50
  • I just tested on ie9, and it worked like intended. Altought its not the optmail solution, I am going to search further more. – marcelo-ferraz Nov 01 '12 at 17:35
  • That's because in IE9, it uses CSS 3, it's only in older versions of IE that the CSS 3 method isn't available, so it has to fall back to another way (which isn't going to work for anything but images) – Jasper Nov 01 '12 at 17:52

1 Answers1

3

If you want to do the rotation yourself, take a look at this question: Image rotation algorithm. It is, of course, not a JavaScript specific explanation, but it should be more or less easily translatable to a canvas based solution. I haven't taken a look at the jQueryRotate implementation, but it is probably also worth looking into.

That said, there is probably no JavaScript specific tutorial on "how to rotate images with the pivot point in the lower left corner" :D

As @Jasper has pointed out, it might be good to know that while canvas itself is not supported in IE versions earlier than IE9, there are ways and means to get (a large subset of) the canvas API even in earlier versions, as ExplorerCanvas demonstrates.

Community
  • 1
  • 1
fresskoma
  • 25,481
  • 10
  • 85
  • 128
  • I find this answer a little hypocritical. While it wasn't explicitly said that no canvas was to be used, it little sense not to want to rely on CSS 3 support if you are going to rely on HTML 5 support – Jasper Nov 01 '12 at 15:05
  • @Jasper: Well, I am not aware of a solution that allows rotation of images without using some kind of canvas to draw on. I assumed that "not using CSS3" was a requirement because of older IE versions, which do not support it, whereas it is possible to use functionality similar to the HTML5 canvas specification even in earlier versions of IE. Therefore, I cannot see how "not using CSS3" does translate to "not using Canvas". – fresskoma Nov 01 '12 at 15:26
  • @x3ro I believe canvas and transform support were both only added in IE9 – Jasper Nov 01 '12 at 15:41
  • @Jasper: I didn't say that `canvas` works in previous IE versions, however it is possible to get such functionality even in IE6, see [ExplorerCanvas](http://code.google.com/p/explorercanvas/). – fresskoma Nov 01 '12 at 15:52
  • @NoProblemBabe: and so it will it using CSS3, IE9 supports the transform property if you add the `-ms-` prefix. – Jasper Nov 01 '12 at 15:56
  • @x3ro: Good point, I missed that one. However, I do say that should be a part of your answer, as it is a part of the answer to the question "how do I rotate images in browsers that do not support the relevant parts of CSS 3" (which, while not what he asked, is clearly what he *did* mean). – Jasper Nov 01 '12 at 15:59