Social Media CSS3 hiệu ứng xoay tròn 360

Đang convert cái template mp3 zing thì bị lỗi code. Đau cả đầu với mấy cái code (oằn tờ là voằn) ra nghe nhạc thì chả đành lòng để đó. Vậy là ra viết mấy code CSS3 đơn giản chơi cho đỡ buồn. :)

Vào chủ đề chính thì code không đẹp cho lắm vì mình không chăm chút vào từng chi tiết hình ảnh mà chỉ qua bài viết này giới thiệu đến các bạn một hiệu ứng CSS quay tròn 360độ, rotate(360deg).

Các bạn xem Demo

Đầu tiên hãy viết dòng code sau:

HTML

CSS: 

Viết thuộc tính chiều cao, độ rộng, cho 4 icon tại thẻ .social như sau:

.social {
  width:40px;
  height:40px;
  margin-left:5px;
  display: inline-block; /*Căn trong một hàng*/
  border-radius: 50%; /*Tạo hình tròn*/
  border: 2px solid #fff; /*Độ dày viền ngoài*/
  transition: background 0.5s; /*Thay đổi hover background trong 0.5s*/
  -moz-transition: background 0.5s; /*Firefox*/
  -webkit-transition: background 0.5s; /*Chrome*/
  transition-property: transform; /*Xác định quá trình chuyển đổi*/
  -moz-transition-property: transform;
  -webkit-transition-property: -webkit-transform;
}

Tạo đường dẫn hình ảnh cho các icon và để background-size: 100% vì một số hình ảnh có size khác nhau nên code dưới mình mới căn lại cho đẹp hơn. Nếu icon của các bạn size giống nhau thì cứ để 100% nha. Hãy thêm no-repeat center center để nền không lặp lại và căn giữa cho nó.

.icon-facebook {
  background: url('http://www.iconsdb.com/icons/preview/white/facebook-m.png') no-repeat center center;
  background-size:90%;}
.icon-facebook:hover {
  background: #fff url('http://www.iconsdb.com/icons/preview/royal-blue/facebook-m.png')  no-repeat center center;
  background-size:100%;}
.icon-gplus {
  background: url('http://www.iconsdb.com/icons/preview/white/google-plus-m.png') no-repeat center center;
  background-size:90%;}
.icon-gplus:hover {
  background: #fff url('http://www.iconsdb.com/icons/preview/soylent-red/google-plus-m.png')  no-repeat center center;
  background-size:100%;}
.icon-youtube {
  background: url('http://www.iconsdb.com/icons/preview/white/youtube-m.png') no-repeat center center;
  background-size:80%;}
.icon-youtube:hover {
  background: #fff url('http://www.iconsdb.com/icons/preview/soylent-red/youtube-m.png')  no-repeat center center;
  background-size:110%;}
.icon-rss {
  background: url('http://www.iconsdb.com/icons/preview/white/rss-m.png') no-repeat center center;
  background-size:80%;}
.icon-rss:hover {
  background: #fff url('http://www.iconsdb.com/icons/preview/orange/rss-m.png')  no-repeat center center;
  background-size:90%;}

Tiếp theo chúng tạo hiệu ứng xoay tròn 360độ khi click vào icon.

.icon-rss:hover,
.icon-gplus:hover,
.icon-facebook:hover,
.icon-youtube:hover {
  transform:rotate(360deg);
  -o-transform:rotate(360deg); /*Opera*/
  -moz-transform:rotate(360deg); /*Firefox*/
  -webkit-transform:rotate(360deg); /*Chrome và Safari*/
}

Trong code trên các bạn chỉ cần chú ý đến: transform:rotate(360deg); chính là góc sẽ xoay và  transition: background 0.5s; chính là thời gian xoay đến khi hết 360độ.

Nếu chưa hiểu hãy bình luận phía dưới nhé.

Chúc các bạn thành công!