2011-07-19 1 views
2

Мой вопрос заключается в том, возможно ли иметь 2 разных перехода CSS3 на одном и том же DIV? Я хотел бы иметь возможность поворота и увеличения масштаба при наведении (в соответствии с приведенным ниже кодом), но затем, когда наведение будет выпущено для div, чтобы просто масштабировать назад, без поворота, до его первоначального размера.Различные переходы CSS3 для активации и ухода: наведите курсор на DIV?

#listitem ul li { 
    float: left; 
    margin: 0 15px 0 15px; 
    padding: 0; 
} 
#listitem ul li:hover{ 
    -webkit-transform: rotate(720deg) scale(1.5); 
    -moz-transform: rotate(720deg) scale(1.5); 
    -ms-transform: rotate(720deg) scale(1.5); 
    -o-transform: rotate(720deg) scale(1.5); 
    transform: rotate(720deg) scale(1.5); 
} 

Это может быть невозможно из-за того, как обращаться с DIV, когда он частично вращается.

Благодаря Майк

+0

не возможно я» m боюсь, не используя JUST css :) – benhowdle89

+0

Я боялся столько же! Спасибо что нашли время ответить. – user114671

ответ

1

Можно сочетать переходы на :hover но ваш rotate составляет 2 полных оборотов (360deg * 2), так что будет обратно в исходное положение. Попробуйте изменить на 20deg, и вы сможете увидеть комбинированные эффекты поворота и масштабирования. Возможно, вам придется использовать JavaScript, чтобы один переход применялся после того, как элемент теряет :hover.

+0

Спасибо за ответ, andyb. Я думаю, что я сформулировал свой вопрос плохо - масштаб и поворот хорошо работают на: hover, но я задаюсь вопросом, могу ли я просто иметь масштаб - а не вращать - когда зависание закончено. Это имеет смысл? – user114671

0

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

+0

только шкала не вращение в то время как зависание не выполняется в css3 переход может быть применим с некоторой помощью javascript – monk

Смежные вопросы