브라우저에서 CSS3 변환 트리거링

Question

나는 애니메이션 CSS3 Media Queries로 놀았지만, 실제 사용은 의문 스럽지만 재미 있습니다. 어쨌든, 상자/divs/selector를 transition/expand/contract 등 브라우저 크기를 조정할 수 있지만 변환 문제가 있습니다. 내가하려고하는 것은 div를 뒤집거나 특정 해상도로 회전시키는 것입니다.

iPad가 가로에서 세로로 바뀌고 div가 바뀌면이 일이 일어난다 고 생각하십시오.

실제로 가능합니까? 그렇다면 무엇이 잘못되었거나 잘못 되었습니까?

Answer 1

좋아, 지금 작동하게되었습니다. post-erasmus 'css를 기반으로 나는 그것을 조정할 수 있었고 100 % 작동시킬 수있었습니다. 코드는 다음과 같습니다.

.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; 

    } 
} 

물론 다른 공급 업체 고유의 접두사를 추가해야합니다. 속성에 애니메이션을 적용 할 때 시작 및 끝 상태를 모두 지정해야합니다. 따라서 변환을 생략하면 속성이 0으로 재설정됩니다.

Answer 2

미디어 쿼리를 사용해 보셨습니까?

.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; 
     } 
} 

즉, 파이어 폭스 등을위한 적절한 (추가) 변환을 사용하면 효과가있는 것으로 보입니다.

나는 함께 here을 넣었다.