Triggering CSS3 Transform on browser resize

Question

I have been playing with animated CSS3 Media Queries, yes I know their practical use is questionable but it is fun. Anyways, I can get boxes/divs/selectors to transition/expand/contract etc on browser resize but I am having problems with transforms. What I am trying to do is make a div flip or rotate at certain resolutions.

Think of it as an iPad changing from landscape to portrait and a div flipping when this happens.

Is this actually possible and if so what am I missing/doing wrong?

Answer 1

Ok, I have it working now. Based on post-erasmus' css I was able to tweak it and get it working 100%. Here's the code:

 .test{width: 400px; height: 200px; 
 -webkit-transform: rotate(0deg);
transition:all .2s linear;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
-webkit-transform-style: preserve-3d;
}

@media screen and (max-width: 319px){
    .test{
            background-color: orange;
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg); 
    }
}

@media screen and (min-width: 320px) and (max-width: 700px){
    .test{
            background-color: green; 

    }
}
@media screen and (min-width: 701px) and (max-width: 1200px){
    .test{
            background-color: red; 
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg); 

    }
}

@media screen and (min-width: 1201px){
    .test{
            background-color: blue;

    }   
}

Of course, you need to add the other vendor specific prefixes. When you animate a property, you need to specify both the beginning and ending state. So it seems that leaving out the transform will reset the property to 0.

Answer 2

Have you tried using media queries?

.test{
        background-color: blue; 
        -webkit-transform: rotate(360deg); 
        -moz-transform: rotate(360deg);
        -ie-transform: rotate(360deg);
        transform: rotate(360deg);
        margin: -26px -26px -26px -26px;
}
@media screen and (min-width: 320px) and (max-width: 700px){
        .test{
                background-color: green; 
                -webkit-transform: rotate(360deg); 
                -moz-transform: rotate(360deg);
                -ie-transform: rotate(360deg);
                transform: rotate(360deg);
                margin: -26px -26px -26px -26px;
        }
}
@media screen and (min-width: 700px) and (max-width: 1200px){
        .test{
                background-color: red; 
                -webkit-transform: rotate(360deg); 
                -moz-transform: rotate(360deg);
                -ie-transform: rotate(360deg);
                transform: rotate(360deg);
                margin: -26px -26px -26px -26px;
        }
}

With the appropriate (additional) transforms for ie, firefox, etc. It appears to work.

I put together a jsfiddle here.