CSS 3D Flip on Hover - Pure CSS3 3D Button Hover Effects - Tutorial
Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng 3D Flip on Hover đơn giản bằng CSS3 vô cùng ấn tượng.
<a href="" id="btn-effect">
<span class="front">Click</span>
<span class="center"></span>
<span class="back">Here</span>
</a>
#btn-effect {
position: relative;
text-transform: uppercase;
text-align: center;
padding: 6px 25px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
width: 200px;
height: 60px;
span {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
display: block;
text-align: center;
font-size: 25px;
line-height: 60px;
background-color: rgba(255,255,255,.05);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 30px;
color: #fff;
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
&.front {
-webkit-transform: rotateX(0deg) translateZ(20px);
transform: rotateX(0deg) translateZ(20px);
}
&.back {
-webkit-transform: rotateX(-180deg) translateZ(20px);
transform: rotateX(-180deg) translateZ(20px);
background: -webkit-gradient(linear, right top, left top, from(#ffdd1f), to(#c31a5b));
background: -webkit-linear-gradient(right, #ffdd1f, #c31a5b);
background: -o-linear-gradient(right, #ffdd1f, #c31a5b);
background: linear-gradient(to left, #ffdd1f, #c31a5b);
}
&.center {
background: -webkit-gradient(linear, right top, left top, from(#c31a5b), to(#7129bd));
background: -webkit-linear-gradient(right, #c31a5b, #7129bd);
background: -o-linear-gradient(right, #c31a5b, #7129bd);
background: linear-gradient(to left, #c31a5b, #7129bd);
&:before {
content: "";
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
border-radius: 30px;
-webkit-transform: translateZ(-1px);
transform: translateZ(-1px);
// background: -webkit-gradient(linear, right top, left top, from(#ffdd1f), to(#c31a5b));
// background: -webkit-linear-gradient(right, #ffdd1f, #c31a5b);
// background: -o-linear-gradient(right, #ffdd1f, #c31a5b);
// background: linear-gradient(to left, #ffdd1f, #c31a5b);
}
}
}
&:hover {
span {
&.front {
-webkit-transform: rotateX(180deg) translateZ(20px);
transform: rotateX(180deg) translateZ(20px);
}
&.back {
-webkit-transform: rotateX(0deg) translateZ(20px);
transform: rotateX(0deg) translateZ(20px);
}
&.center {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
}
}
}