Running CSS3 Transform when resizing a browser

Question

I played with animated CSS3 Media Queries, yes, I know that their practical use is in doubt, but it's fun. In any case, I can get boxes / divs / selectors in transition / expand / agree , etc. when resizing the browser, but I am having problems with conversions. What I'm trying to do is flip div or rotate at specific permissions.

Think about it, as the iPad changes from landscape to portrait, and the div changes to flipping when this happens.

Is this possible, and if so, what am I not seeing / doing wrong?

Answer 1

OK, now I'm working. Based on css after eramus, I was able to configure it and make it work 100%. Here is 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 other provider prefixes. When you animate a property, you need to specify the start and end state. Thus, it seems that the exception from the conversion will be reset for property 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 appropriate (additional) transformations, for example, firefox, etc. He works.

I have compiled jsfiddle here .