#basket
New messages Members Forum rules Search RSS
Page 1 of 11
Forum » For webmasters » HTML / CSS / Javascript » 3D effect for title on hover
3D effect for title on hover
adminDate: Monday, 27.06.2011, 15:34 | Message # 1
Group: Verified
Posts: 187
Awards: 8
Status: Offline
When hovering the link with a cursor, it becomes animated and shifts to the right or to the left. Background color is changed to increase the effect. This effect is created by means of CSS only!

CSS:

Code
.cpojer-links a {
           display: inline-block;
           padding: 4px;
           outline: 0;
           color: #3a599d;
           -webkit-transition-duration: 0.25s;
           -moz-transition-duration: 0.25s;
           -o-transition-duration: 0.25s;
           transition-duration: 0.25s;
           -webkit-transition-property: -webkit-transform;
           -moz-transition-property: -moz-transform;
           -o-transition-property: -o-transform;
           transition-property: transform;
           -webkit-transform: scale(1) rotate(0);
           -moz-transform: scale(1) rotate(0);
           -o-transform: scale(1) rotate(0);
           transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
           background: #3a599d;
           text-decoration: none;
           color: #fff;
           -webkit-border-radius: 4px;
           -moz-border-radius: 4px;
           -o-border-radius: 4px;
           border-radius: 4px;
           -webkit-transform: scale(1.05) rotate(-1deg);
           -moz-transform: scale(1.05) rotate(-1deg);
           -o-transform: scale(1.05) rotate(-1deg);
           transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
     -webkit-transform: scale(1.05) rotate(1deg);
     -moz-transform: scale(1.05) rotate(1deg);
     -o-transform: scale(1.05) rotate(1deg);
     transform: scale(1.05) rotate(1deg);
}

HTML:

Code
<div class="cpojer-links">YOUR TEXT</div>
 
Forum » For webmasters » HTML / CSS / Javascript » 3D effect for title on hover
Page 1 of 11
Search: