Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

updated the rotate transition to move the page out of view

Browse source
This commit is contained in:
scottjehl 2012-01-05 17:49:03 +07:00
parent 58d285a4a7
commit a0c67fa026
1 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
css/structure/jquery.mobile.transitions.rotate.css
View file

@ -1,51 +1,51 @@
@-webkit-keyframes rotateinfromleft {
from { -webkit-transform: rotate(-90deg); }
from { -webkit-transform: rotate(-180deg); }
to { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes rotateinfromleft {
from { -moz-transform: rotate(-90deg); }
from { -moz-transform: rotate(-180deg); }
to { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes rotateinfromright {
from { -webkit-transform: rotate(90deg); }
from { -webkit-transform: rotate(180deg); }
to { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes rotateinfromright {
from { -moz-transform: rotate(90deg); }
from { -moz-transform: rotate(180deg); }
to { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes rotateouttoright {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(90deg); }
to { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes rotateouttoright {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(90deg); }
to { -moz-transform: rotate(180deg); }
}
@-webkit-keyframes rotateouttoleft {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-90deg); }
to { -webkit-transform: rotate(-180deg); }
}
@-moz-keyframes rotateouttoleft {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(-90deg); }
to { -moz-transform: rotate(-180deg); }
}
.rotate {
-webkit-transform-origin: 50% 80%;
-webkit-transform-origin: 50% 80%;
-webkit-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
.rotate.out {
-webkit-transform: rotate(-90deg);
-webkit-transform: rotate(-180deg);
-webkit-animation-name: rotateouttoleft;
-moz-transform: rotate(-90deg);
-moz-transform: rotate(-180deg);
-moz-animation-name: rotateouttoleft;
}
@ -57,9 +57,9 @@
}
.rotate.out.reverse {
-webkit-transform: rotate(90deg);
-webkit-transform: rotate(180deg);
-webkit-animation-name: rotateouttoright;
-moz-transform: rotate(90deg);
-moz-transform: rotate(180deg);
-moz-animation-name: rotateouttoright;
}