Question

I am testing on the Motorola Droid 2. What happens is when my -webkit-transform:rotate(1650deg) completes, the image returns to the original position at 0deg.

Is there a way to stop this from happening?
What is trying to happen is a class is being applied to the wheel specifying how many degrees it needs to turn to land on a certain number.

I cannot use outside libraries such as JQuery for this project.

Here is the code I am using:

.wheelcontainer{
width: 313px;
height: 313px;
text-align:center;
display: block;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
z-index: 10;
}

.wheel{
-o-transition: all 7s ease-out;
-ms-transition: all 7s ease-out;
-moz-transition: all 7s ease-out;
-webkit-transition: all 7s ease-out;

width: 313px;
height: 313px;
background: url('../images/wheel.png') no-repeat;
background-size: 100% 100%;
z-index:-1000;
position:relative;
transform-origin:50% 50%;
-ms-transform-origin:50% 50%; /* IE 9 */
-webkit-transform-origin:50% 50%; /* Safari and Chrome */
-moz-transform-origin:50% 50%; /* Firefox */
-o-transform-origin:50% 50%; /* Opera */
 }

 /*      ROTATIONS!     */

/*330*/
.threethirty_right{
z-index:-10000;
transform: rotate(1830deg);
-ms-transform: rotate(1830deg); /* IE 9 */
-webkit-transform: rotate(1830deg); /* Safari and Chrome */
-moz-transform: rotate(1830deg); /* Firefox */
-o-transform: rotate(1830deg); /* Opera */
}

Thanks!

Answer 1

Solved.
Android 2.0 Devices do not support Transitions.

http://daneden.me/2011/12/putting-up-with-androids-bullshit/