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

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

 

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

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

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

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

  On 06.03.2014 at 19:19, KGstan said:

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

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

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

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

  On 07.03.2014 at 08:31, zhenyasim said:

 

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

.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, можно много примеров привести. Этот самый простой код, который мне в голову пришел.

  On 07.03.2014 at 08:31, zhenyasim said:

 

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

.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, да не я привык )) Это для полных нубов

  On 06.03.2014 at 19:19, KGstan said:

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

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

 

  On 07.03.2014 at 02:12, Recouse said:

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

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

Edited 7 марта, 201411 yr by SUAMF

  On 07.03.2014 at 13:26, SUAMF said:

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

 

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

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

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

В чате: .ipsUserPhoto_icon

Теме: .ipsUserPhoto.ipsUserPhoto_variable

Профиле: img#profile_photo

  On 26.09.2014 at 08:17, Respected said:

В чате: .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);

Edited 26 сентября, 201410 yr by Svenson

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

В чате: .ipsUserPhoto_icon

Теме: .ipsUserPhoto.ipsUserPhoto_variable

Профиле: img#profile_photo

 

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

  On 27.09.2014 at 08:34, Svenson said:

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

В чате: .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);

}

 

но почему то не работает

Edited 27 сентября, 201410 yr by Svenson

Обманул.

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

Вместо 

.ipsUserPhoto_icon,
.ipsUserPhoto.ipsUserPhoto_variable,
img#profile_photo

будет 

.ipsUserPhoto_icon:hover,
.ipsUserPhoto.ipsUserPhoto_variable:hover,
img#profile_photo:hover

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

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

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

  On 05.12.2021 at 19:11, saiko said:

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

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

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