Как настроить «Живые кнопки мы в соцсетях»?

Question

[blazer05]

Здравствуйте.
Сделал себе такие кнопки на сайте как в этом примере, все точно так, но почему то в моем случае они крутятся не так как в примере. Что я сделал не так?
https://youtu.be/z24WVkR5G0E

Comments

[Ksider]

Ютуб как песочница, оригинально.

[blazer05]

Ksider: в каком смысле?

[Сергей Тутуков]

htmlbook.ru/css/transform-origin - в этом проблема

[Ksider]

blazer05: всмысле, чтобы поенять что вы сделали не так нужен не ютуб а код в песочнице. Например на codepen.io на худой конец сюда код выложить(что хуже)

[blazer05]

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

[Ksider]

blazer05: значит у вас все работает.
https://codepen.io/ksider/pen/xdmOOV

Если нет, то вы сделали что-то не так как в примере. Например куда-то затесался transform-origin

[Артём]

[alvvi]

Артём: какие красивые Светланы.

[blazer05]

Сергей Тутуков:
а что в этом коде не так?

#social a:hover {
    background-color: transparent;opacity:0.7;
}
#social img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
#social img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

в шаблоне

<div id="social">
         <div class="clip_frame grpelem" id="u13464" data-muse-uid="U13464" data-muse-type="img_frame"><!-- image -->
          <a href="https://vk.com/odrova8" target="_blank"><img class="block" id="u13464_img" title="Страница В контакте" src="{% static 'colyn/images/vkontakte-48x48.png' %}" alt="" width="48" height="48" data-muse-src="{% static 'colyn/images/vkontakte-48x48.png' %}"/></a>
         </div>
         <!-- /m_editable -->
         <!-- m_editable region-id="editable-static-tag-U13449-BP_infinity" template="index.html" data-type="image" -->
         <div class="clip_frame grpelem" id="u13449" data-muse-uid="U13449" data-muse-type="img_frame"><!-- image -->
             <a href="https://www.facebook.com/groups/132544753956741/" target="_blank"><img class="block" id="u13449_img" title="Страница в Facebook" src="{% static 'colyn/images/facebook-48x48.png' %}" alt="" width="48" height="48" data-muse-src="{% static 'colyn/images/facebook-48x48.png' %}"/></a>
         </div>
         <!-- /m_editable -->
         <!-- m_editable region-id="editable-static-tag-U13457-BP_infinity" template="index.html" data-type="image" -->
         <div class="clip_frame grpelem" id="u13457" data-muse-uid="U13457" data-muse-type="img_frame"><!-- image -->
             <a href="https://m.ok.ru/group/53238553706648" target="_blank"><img class="block" id="u13457_img" title="Страница в Одноклассниках" src="{% static 'colyn/images/ok.png' %}" alt="" width="48" height="48" data-muse-src="{% static 'colyn/images/ok.png' %}"/></a>
         </div>
       </div>

уже пробовал по разному в коде но всеравно нужного результата не могу добиться?

[Сергей Тутуков]

blazer05: https://codepen.io/STutukov/pen/eWbPVP
добавил
transform-origin:center center;

[blazer05]

Сергей Тутуков: Спасибо, получилось! Но мне не понятно, почему в инструкции все работает и без transform-origin:center center; ???

[Сергей Тутуков]

blazer05: погугли)