Rotate デモ

alice.rotate("D01", "20");

Rotate an image 20° with a 1.5s transition:

alice.rotate("D02", "20", {
    origin: "center",
    timing: 1500,
    iteration: '3',
    direction: 'alternate',
    easing: "cubic-bezier(0.33333,0.6667,0.66667,1)"
});

Simulate a wobble effect:

alice.rotate("D03", "5", {
    origin: "center",
    timing: 100,
    iteration: 'infinite',
    direction: 'alternate'
});

Simulate a pendulum swinging:

alice.rotate("D04", "45", {
    origin: "50% 0%",
    timing: 1000,
    iteration: 'infinite',
    direction: 'alternate',
    easing: 'cubic-bezier(0.33333,0.6667,0.66667,1)'
});

Simulate a swinging door hinge:

alice.rotate("D05", "90", {
    origin: "0% 0%",
    timing: 1500,
    iteration: 'infinite',
    direction: 'alternate',
    easing: 'ease-in-out'
});

Deck of Cards

Rotate an entire deck of images:

alice.rotate("container1", "20");

Rotate a deck of images like playing cards:

alice.rotate("container2", "-145", {
    origin: "0% 100%",
    timing: 3000,
    angle_offset: 45,
    iteration: 'infinite',
    direction: 'alternate',
    easing: "cubic-bezier(0.33333,0.6667,0.66667,1)"
});

Rotate a deck of cards back-and-forth:

alice.rotate("container3", "90", {
    origin: "center",
    timing: 2000,
    timing_offset: 5,
    iteration: 'infinite',
    direction: 'alternate',
    easing: "cubic-bezier(0.33333,0.6667,0.66667,1)"
});

Forms

Rotate a form with a transition:

alice.rotate("container4", "20", {
    origin: "center",
    timing: 1500,
    iteration: 'infinite',
    direction: 'alternate',
    easing: "cubic-bezier(0.33333,0.6667,0.66667,1)"
});