How to Create 3D Rolling Link Effect Using CSS in Blogger

Today I am going to teach you how to Create 3D Rolling Link Effect Using CSS in Blogger. It can be used in various activities like if you want to decorate blogger. To add this to blogger follow the steps given below

How to Add this to blogger

Go to template>EDIT HTML
Search for ]]></b:skin> in the editor
Paste the following piece of code above it

.bgt-roll-link { color: #2aa4cf; text-decoration: none; font-weight:bold; display: inline-block; overflow: hidden; vertical-align: top;     -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; perspective: 600px;
-webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%;   }.bgt-roll-link:hover {text-decoration:none; color: #2aa4cf; font-weight:bold;}.bgt-roll-link span { display: block; position: relative; padding: 0 2px;
-webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; transition: all 300ms ease;     -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%;     -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d;}.bgt-roll-link:hover span { background: #2aa4cf;
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );}
.bgt-roll-link span:after { content: attr(data-title); display: block; position: absolute; left: 0; top: 0; padding: 0 2px; color: #fff; background: #2aa4cf;
-webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); a.roll-link:link, a.roll-link:visited{color:red;}}