Перейти к содержанию

"Вращающиеся" аватарки при наведении


Рекомендуемые сообщения

Это тема поддержки статьи: "Вращающиеся" аватарки при наведении.

Здесь вы можете обсудить все вопросы, связанные с этой статьёй.

 

Дата добавления статьи: 06 Март 2014 - 20:52

Дата обновления статьи: 06 Март 2014 - 20:52

Ссылка на комментарий
Поделиться на другие сайты

Это конечно хорошо, для новичков действительно нужная вещь.

Ссылка на комментарий
Поделиться на другие сайты

Не получилось .. :shake: 

для этого над чтобы у тебя рук не было

Ссылка на комментарий
Поделиться на другие сайты

Можно так сделать:

.avatar
{ display: block; width: 30%; height: 35%; position: relative; z-index: 10;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}



			
		
Ссылка на комментарий
Поделиться на другие сайты

 

Можно так сделать:

.avatar
{ display: block; width: 30%; height: 35%; position: relative; z-index: 10;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}

Recouse, добавь в статью, действительно хорошая вещь

Ссылка на комментарий
Поделиться на другие сайты

RealUser, можно много примеров привести. Этот самый простой код, который мне в голову пришел.

Ссылка на комментарий
Поделиться на другие сайты

 

Можно так сделать:

.avatar
{ display: block; width: 30%; height: 35%; position: relative; z-index: 10;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}

И что это забред младенца?

Ссылка на комментарий
Поделиться на другие сайты

Mattko, мда... Ну-ка объясните, почему бред? Интересно стало.

Ссылка на комментарий
Поделиться на другие сайты

Не вижу в данной статье абсолютно никакой полезности. С таким успехом можно по каждому css3 правилу написать отдельную статью. Бред вообще какой-то. без обид.

Ссылка на комментарий
Поделиться на другие сайты

Respected, да не я привык )) Это для полных нубов

Ссылка на комментарий
Поделиться на другие сайты

Не получилось .. :shake: 

Вы хромом или оперой пользуетесь? Если да, то дело в том, что они поддерживают описанное в статье только с блочными элементами (т.е. если не работает, то надо добавить "display:block")

 

для этого над чтобы у тебя рук не было

ИМХО, ответ немного некорректен, т.к. Вы забыли или не знали написать об этом недостатке, даже если дело не в нём. :)

Изменено пользователем SUAMF
Ссылка на комментарий
Поделиться на другие сайты

Вы хромом или оперой пользуетесь? Если да, то дело в том, что они поддерживают описанное в статье только с блочными элементами (т.е. если не работает, то надо добавить "display:block")

 

ИМХО, ответ немного некорректен, т.к. Вы забыли или не знали написать об этом недостатке, даже если дело не в нём. :)

у меня на всех браузерах работает

Ссылка на комментарий
Поделиться на другие сайты

  • 6 месяцев спустя...

подскажите пожалуйста как сделать чтобы в чате, профиле и теме крутились?

Ссылка на комментарий
Поделиться на другие сайты

В чате: .ipsUserPhoto_icon

Теме: .ipsUserPhoto.ipsUserPhoto_variable

Профиле: img#profile_photo

Ссылка на комментарий
Поделиться на другие сайты

В чате: .ipsUserPhoto_icon

Теме: .ipsUserPhoto.ipsUserPhoto_variable

Профиле: img#profile_photo

а там между {} тоже самое вставлять?  и это все меняется в  ipb_styles.css?

 -moz-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

-moz-transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

o-transform: rotate(-360deg);

-ms-transform: rotate(-360deg);

transform: rotate(-360deg);

Изменено пользователем Svenson
Ссылка на комментарий
Поделиться на другие сайты

кто нибудь сможет подсказать где искать:

В чате: .ipsUserPhoto_icon

Теме: .ipsUserPhoto.ipsUserPhoto_variable

Профиле: img#profile_photo

 

и что нужно вставлять туда?

Ссылка на комментарий
Поделиться на другие сайты

кто нибудь сможет подсказать где искать:

В чате: .ipsUserPhoto_icon

Теме: .ipsUserPhoto.ipsUserPhoto_variable

Профиле: img#profile_photo

 

и что нужно вставлять туда?

Что сложного?

Добавляете указанные селекторы к 

.ipsUserPhotoLink:hover
.ipsUserPhoto {
Будет так 

.ipsUserPhoto_icon,
.ipsUserPhoto.ipsUserPhoto_variable,
img#profile_photo,
.ipsUserPhotoLink:hover
.ipsUserPhoto {
Ссылка на комментарий
Поделиться на другие сайты

вставил вот так:

 

.ipsUserPhotoLink:hover
.ipsUserPhoto_icon,
.ipsUserPhoto.ipsUserPhoto_variable,
img#profile_photo,
.ipsUserPhoto {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
 
но почему то не работает
Изменено пользователем Svenson
Ссылка на комментарий
Поделиться на другие сайты

Обманул.

Нужно добавить псевдокласс hover
 

Вместо 

.ipsUserPhoto_icon,
.ipsUserPhoto.ipsUserPhoto_variable,
img#profile_photo

будет 

.ipsUserPhoto_icon:hover,
.ipsUserPhoto.ipsUserPhoto_variable:hover,
img#profile_photo:hover
Ссылка на комментарий
Поделиться на другие сайты

теперь только в чате крутится, на главной странице и в профиле не крутятся)

Ссылка на комментарий
Поделиться на другие сайты

разобрался сам, спс за подсказки

Ссылка на комментарий
Поделиться на другие сайты

  • 7 лет спустя...

Я извиняюсь а в 2021 году как это реализовать?)) и еще видел у кого то как разделы форум на котором разделы форумом тоже анимированы при наведение на них. 

Ссылка на комментарий
Поделиться на другие сайты

18 минут назад, saiko сказал:

как разделы форум на котором разделы форумом

убейте меня уже.. 

Ссылка на комментарий
Поделиться на другие сайты

Desti да пока писал чето мысль видать потерял xD разделы форума анимированы тоже, имел ввиду xD

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...