애니메이션 내가 간단한 글꼴 멋진 아이콘 스택을 가져가

Question

에 아이콘을 회전합니다. 달성하고자하는 효과는 여기에있는 "사회적 공유"이미지와 비슷합니다. http://demo.rocknrolladesigns.com/html/jarvis/shortcodes.html. (죄송합니다, # anchor가 없으므로 스크롤해야합니다.)

이 사이트는 png 이미지에서 오프셋을 사용하지만 font-awesome 및 일부 CSS3로이 기능을 사용하고 싶습니다. 어떤 아이디어?

편집

여기

시도 구현 (실패!) : http://bootply.com/66542 기본적으로

Answer 1

에서, .icon-stack에 고정 된 높이/폭을 가지고있다. 두 자식 요소 모두에서 동일한 높이를 유지하십시오. 그러면 자식 요소가 서로 아래로 떠있게됩니다. 거기에서 그냥 마우스로 움직이면됩니다. 마우스를 움직일 때 음의 위쪽 여백을 사용하여 "스크롤"되도록했습니다. 음의 상단 여백은 하위 요소 높이와 같아야합니다. 그만큼 CSS 전이를 사용하여 애니메이션을 만들었습니다.

overflow: hidden;을 켜기/끄기로 설정하면 더 잘 작동하는지 확인할 수 있습니다.

Answer 2

어쩌면 이것이 당신이 찾고있는 것일까요?

http://jsfiddle.net/VVeTw/

<span class="icon-stack"> 
<i class="icon-circle icon-stack-base"></i> 
<i class="icon-flag icon-light first"></i> 
<i class="icon-flag icon-light second"></i> 
</span> 

와 CSS

span { 
    font-size: 50px; 
    color: #fff; 
} 
.icon-stack-base { 
    color: white; 
} 
.icon-light { 
    color: black; 
} 
.icon-stack, .icon-stack-base, .icon-flag { 
    -webkit-transition: all 0.2s ease 0s; 
    -moz-transition: all 0.2s ease 0s; 
    -o-transition: all 0.2s ease 0s; 
    transition: all 0.2s ease 0s; 
    overflow: hidden; 
} 
i { 
    height: 60px; 
    width: 60px; 
} 
.icon-stack:hover { 
    color: black; 
    cursor: pointer; 
} 
.icon-stack:hover .icon-stack-base { 
    color: #5b9a68; 
} 
.icon-stack:hover .first { 
    margin-top: -80px; 
} 
.icon-stack:hover .second { 
    color: white; 
}