[2015.11.19] css3, jquery 를 활용한 회전 소셜 버튼

이번엔 멋진 소셜 다이얼 입니다.ㅎ

CSS3 linear-gradient 사용법과 jquery를 통한 동적 css 적용(transform- rotate) 에 대해서 맛보기로 합시다.ㅎ

linear-gradient 적용 예제

background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(222,222,222,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(222,222,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dedede',GradientType=0 ); /* IE6-9 */

    height: 153px;
    border-radius: 10px;
    box-shadow: 0px 2px 5px #c3c3b8;
    width: 201px;
    top: -3px;
    position: absolute;
    left: -13px;

jquery로 css(transform-rotate) 적용 예제

$('body').bind(mousewheelevt, function(e){
  var evt = window.event || e    
  evt = evt.originalEvent ? evt.originalEvent : evt;                
  var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta 
  if(delta > 0) {
    $('.roll_inner').css('transform','rotateX(' + (rot + 60)  + 'deg)');
    rot = rot + 60
  }
  else{
    $('.roll_inner').css('transform','rotateX(' + (rot - 60)  + 'deg)');
    rot = rot - 60
  }   
});

간단한 사용 예제 및 데모

See the Pen The 3D Wheel of Social by Jamie Coulter (@jcoulterdesign) on CodePen.