Jump to content

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

Featured Replies

Posted

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

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

 

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

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

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

.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, добавь в статью, действительно хорошая вещь

 

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

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

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

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

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

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

 

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

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

Edited by SUAMF

  • Author

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

 

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

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

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

В чате: .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 by 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);
}
 
но почему то не работает

Edited by Svenson

Обманул.

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

Вместо 

.ipsUserPhoto_icon,
.ipsUserPhoto.ipsUserPhoto_variable,
img#profile_photo

будет 

.ipsUserPhoto_icon:hover,
.ipsUserPhoto.ipsUserPhoto_variable:hover,
img#profile_photo:hover
  • 7 years later...

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.