01.
<script src=
"//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"
></script>
02.
<script>
03.
04.
$(
function
() {
05.
06.
07.
$.fn.extend({
08.
rotateAction:
function
(deg, duration, easing){
09.
var
target =
this
;
10.
$({kakudo: 0}).animate(
11.
{kakudo: deg},
12.
{
13.
duration: duration,
14.
easing: easing,
15.
step:
function
(now) {
16.
target.css({
17.
transform:
'rotate('
+ now +
'deg)'
18.
});
19.
}
20.
}
21.
);
22.
}
23.
});
24.
25.
});
26.
</script>
27.
28.
<input
29.
type=
"button"
30.
value=
"画像回転"
31.
onclick=
'$("#target").rotateAction(360,1000,"swing");'
>
32.
33.
<input
34.
type=
"button"
35.
value=
"この IFRAME を回転"
36.
onclick=
'$(document.body).rotateAction(360,1500,"swing");'
>
37.
38.
<input
39.
type=
"button"
40.
value=
"このタブのみ回転"
41.
onclick=
'$("#tabs-1").rotateAction(360,1500,"swing");'
>
42.
43.
<input
44.
type=
"button"
45.
value=
"ウインドウ全体を回転"
46.
onclick=
'$(parent.document.body).rotateAction(360,1500,"swing");'
>
47.
48.
<input
49.
type=
"button"
50.
value=
"全てを回転"
51.
onclick=
'$([parent.document.body,document.body,$("#target")[0],$("#tabs-1")[0]]).rotateAction(360,10000,"swing");'
52.
style=
"background-color:deeppink;color:white"
>
53.
54.
<input
55.
type=
"button"
56.
value=
"何もかも回転"
57.
onclick=
'$(document.body).find("*").rotateAction(360,10000,"swing");'
58.
style=
"background-color:deeppink;color:white"
>
59.
60.
<br><br><br>
61.
62.
<img
63.
id=
"target"
64.
src=
"https://lh5.googleusercontent.com/-kCYTSmTrJXs/URvMQy9ClqI/AAAAAAAARuw/5BTKTk2c_sw/s128/_img.png"
65.
style=
"border: solid 0px #000000"
>