Как применять преобразования CSS3 с анимацией по ключевым кадрам?

Как применить более одного преобразования с анимацией CSS3?

Вот мой HTML-код:

<div class="container">
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
<div class="cell"><span class="inner"></span><span class="inner"></span></div>
</div>

И моя попытка:

@-webkit-keyframes firstanim{
    from{
        -webkit-transform:scale(1);
        -webkit-transform:rotate(0deg);
    backgroud:skyblue;
    left:0px;

    -webkit-transform: rotateY(0deg);
   }    to{
    -webkit-transform:rotate(360deg);
    -webkit-transform:scale(1.5);
    background:orange;
    left:100px;
    -webkit-transform: rotateY(360deg);
   }
}


.container{
    border:1px solid black;
    padding:20px;
    width:250px;
    height:50px;
    position:realtive;
}
.cell{
    width:25px;
    height:25px;

    background:skyblue;

    float:left;
    display:inline-block;
    margin:0px 5px;
    position:relative;
    -webkit-animation: firstanim 3s infinite;

}
.inner{
 width:100%;
 height:50%;
 float:left;

    border:1px solid white;
    border-left-width:0px;
    borer-right-width:0px;
}

Результат находится здесь.

К элементам применяется только одно преобразование, даже если я добавлю больше.


html jquery css css-transforms
person ramesh babu    schedule 28.09.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вот демонстрация скрипки, работающая с несколькими преобразованиями.

-webkit-transform:scale(1)  rotateY(0deg);

вам нужно подать заявку, как это.

person kongaraju    schedule 28.09.2012
comment
Пожалуйста, не публикуйте ответ, идентичный другому ответу, особенно если другой ответ более подробный. Это не добавляет никакого вклада. - person Chris; 28.09.2012
comment
Извините! Я не видел ответа из-за обновления скрипки - person kongaraju; 28.09.2012

arrow_upward
5
arrow_downward

Если вы напишете что-то вроде этого:

transform: rotate(30deg);
transform: scale(3);

затем второй переопределяет первый, и ваш элемент только масштабируется, а не поворачивается.

Чтобы применить несколько преобразований к одному элементу, вам нужно объединить их в цепочку.

Пример:

transform: rotate(30deg) scale(3) translateX(3em) skewY(60deg);

Кроме того, порядок, в котором вы их применяете, имеет значение, и вы можете получить разные результаты в зависимости от выбранного порядка — см. этот пример, где синий прямоугольник не имеет такой же формы, как красный, после применения тех же двух преобразований, но в обратном порядке.

Ваша игра с цепочками преобразований: http://jsfiddle.net/TBrf2/4/

person Ana    schedule 28.09.2012