4

私はアニメーション化された CSS3 メディア クエリで遊んでいます。はい、それらの実際の使用には疑問がありますが、楽しいものです。とにかく、ブラウザーのサイズ変更時にボックス/div/セレクターをトランジション/展開/縮小などに使用できますが、変換に問題があります。私がやろうとしているのは、特定の解像度で div を反転または回転させることです。

これは、iPad が横向きから縦向きに変化し、これが発生したときに div が反転したと考えてください。

これは実際に可能ですか?もしそうなら、私は何が欠けている/間違っていますか?

4

2 に答える 2

1

メディアクエリを使用してみましたか? 

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

つまり、firefoxなどの適切な（追加の）変換を使用すると、機能するように見えます。

ここにjsfiddleをまとめました。

于 2012-02-08T14:54:09.913 に答える
1

わかりました、私は今それを働いています。ポスト エラスムスの 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 にリセットされるようです。

于 2012-02-08T15:46:46.983 に答える