CSS3 Social Icon Sets with Rotate Transforms

Web Tutorials

Today I am going to share a tutorial on creating Responsive CSS3 social Icons with Rotate Transforms. The success of Social Media Icon is to promote your business on relevant social networks and allows your audience to return back.

There are lot of Free Social Media Icon sets in internet world. You can also choose this if you like.

There is a brief tutorial described below and finally you can download it absolutely for free.

transform-rotate-css3-icons

Demo Get Source

HTML CODE:

From the below HTML Code, I have shown only 3 important social icons[Facebook, Twitter and Google Plus]. In place of #, you can add you own social follow url. To get the remaining action, you can check out by downloading the package.

Note 1: For Demo 1, i have added class name as “social_icons

Note 2: For Demo 2, i have added class name as “social_icon

/* Demo 1*/
<div class="social_follow_cnt">
 <div class="social_icons">
 <a class="facebook fa icon-facebook" title="Facebook" href="#" target="_blank">
 </a>
 </div>
 <div class="social_icons">
 <a class="twitter fa icon-twitter" title="Twitter" href="#" target="_blank">
 </a>
 </div>
 <div class="social_icons">
 <a class="googleplus fa icon-google-plus" title="google plus" href="#" target="_blank">
 </a>
 </div>
.......
</div>

/* Demo 2 */
<div class="social_follow_cnt">
 <div class="social_icon">
 <a class="facebook fa icon-facebook" title="Facebook" href="#" target="_blank">
 </a>
 </div>
 <div class="social_icon">
 <a class="twitter fa icon-twitter" title="Twitter" href="#" target="_blank">
 </a>
 </div>
 <div class="social_icon">
 <a class="googleplus fa icon-google-plus" title="google plus" href="#" target="_blank">
 </a>
 </div>

CSS Code:

The following CSS code is just to show Rotate Transform functionality. If you want to see the entire CSS code, download the package.

.social_icons a:after {
 position: absolute;
 display: block;
 content: '';
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 -webkit-transition: all 200ms cubic-bezier(0,0.5,0.5,1);
 transition: all 200ms cubic-bezier(0,0.5,0.5,1);
}

.social_icons a:before {
 position: absolute;
 display: inline-block;
 top: 50%;
 left:50%;
 font-size: 32px;
 font-weight: 400;
 line-height: 1em;
 margin: -.5em 0 0 -.5em;
 -moz-osx-font-smoothing: grayscale;
 smoothing: antialiased;
 z-index: 1;
 -webkit-transition: all 150ms cubic-bezier(0,0.5,0.5,1);
 transition: all 150ms cubic-bezier(0,0.5,0.5,1);
 -webkit-transform: rotate(0deg) scale(0.5);
 transform: rotate(0deg) scale(0.5);
}

.social_icons a:hover:before {
 -webkit-transform: rotate(-20deg) scale(1);
 transform: rotate(-20deg) scale(1);
}

Implement the needy icons in your website and get decent traffic.  If you have any queries just comment.

This Article Was Written By

Ruban Silva

I've been working on Web since 2011, loves to help others providing Web Design Resources. My other skills are Word press Development (under varies niches), Thesis Skin Development, Genesis Child Theme Development and SEO.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

0 comments… add one

Leave a Comment