How do I rotate a div with Raphael.js?

Question

I am brand new to Raphael and am really stuck, I would like to rotate a div and its contents, using a button, with Raphael.

Ideally, I would like to have a smooth animation that goes from 0 degrees to -90 degrees when the button is clicked, then when the button is clicked again, the animation would reverse. I think I will change the id or class on mouse click so that I can use the same button for both animations. Would that be wise?

I really would like some help please, my Sandbox is at http://jsbin.com/isijo/ and you can edit it at http://jsbin.com/isijo/edit

Many thanks in advance for any help.

Answer 1

Hello and welcome to Raphael!

I have been looking at Raphael for more than a few months and although the documentation is not very comprehensive the software is brilliant.

I have been mixing Divs with Raphael objects in many ways and have got a "feel" for what works and what does not work.

I am recommending that you do not try rotating divs but (instead) Raphael objects.

First of all you could make a shiney set of Raphael buttons using this "tweakable" code below..

var bcontrols = new Array();
var yheight = 300;

for (var i = 0; i < 3; i++) {
    bcontrols[i] = paper.circle(15 + (35 * i), yheight, 15).attr({
        fill: "r(.5,.9)#39c-#036",
        stroke: "none"
    });

    bcontrols[i].shine = paper.ellipse(15 + (35 * i), yheight, 14, 14).attr({
        fill: "r(.5,.1)#ccc-#ccc",
        stroke: "none",
        opacity: 0
    });

    bcontrols[i].index = i;
    bcontrols[i].shine.index = i;

    bcontrols[i].shine.mouseover(function (e) {
        this.insertBefore(bcontrols[this.index]);
    });

    bcontrols[i].mouseout(function () {
        this.insertBefore(bcontrols[this.index].shine);
    });

    /* Called from Raphael buttons */
    bcontrols[i].click(function () {
        alert("Hello you just clicked " + this.index);

    });
}

Next you need to know more about rotating Sets:

var s = paper.set();

s.push(paper.rect(10, 10, 30, 30, 10).attr({fill:'red'}));

s.push(paper.rect(50, 10, 30, 30, 5).attr({fill:'blue'}));

s.push(paper.rect(90, 10, 30, 30).attr({fill:'orange'}));

s.animate({rotation: "360 65 25"}, 2000);

This shows the degree of rotation and the centre of rotation of the "set" on the last line.

My additional Raphael resources website which aims to supplement documentation (Amongst other things):

http://www.irunmywebsite.com/raphael/raphaelsource.html

Heres where you can run the above 2 code examples without alteration:

http://raphaeljs.com/playground.html

I'm hoping this helped...

Answer 2

To my knowledge, there is no way to convert a div into a Raphael object. Since the Raphael rotate command is only defined for Raphael objects, your best bet is to create the major elements of your div (images, text, buttons and all) in Raphael instead of HTML, put them together in a single set, and, as the set is a Raphael object, rotate the set.