Запуск CSS3 Transform при изменении размера браузера - PullRequest
Новая
       8

Запуск CSS3 Transform при изменении размера браузера

4 голосов
/ 08 февраля 2012

Я играл с анимированными мультимедийными запросами CSS3, да, я знаю, что их практическое использование сомнительно, но весело.В любом случае, я могу получить поля / разделители / селекторы для переход / расширение / контракт и т. Д. При изменении размера браузера, но у меня проблемы с преобразованиями.То, что я пытаюсь сделать, это перевернуть div или повернуть его в определенных разрешениях.

Думайте об этом как об изменении iPad с альбомной ориентации на портретную и переворачивании div, когда это происходит.

Возможно ли это на самом деле, и если да, то что я упускаю / делаю неправильно?

Ответы [ 2 ]

1 голос
/ 08 февраля 2012

Хорошо, у меня сейчас работает. Основываясь на 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.

1 голос
/ 08 февраля 2012

Вы пробовали использовать медиа-запросы? 

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

С соответствующими (дополнительными) преобразованиями для ie, firefox и т. Д. Это, кажется, работает.

Я собрал jsfiddle здесь .

...