之前为大家介绍了好多纯css3实现的很漂亮的按钮。今天小编要给各网友再分享一款纯css3实现的翻转按钮。实现中给出了两种的翻转特效，一种是基于按扭的左边缘为中心线，另一种是基于按钮的中间为中心线。我们一起看下效果图：
实现的代码
html代码：
<article>
<a target="_blank" class="btn-fold-1" href="http://www.w2bc.com" rel="external nofollow" rel="external nofollow" ><span>Donate</span><span>to
RIF</span> </a>
<a target="_blank" class="btn-fold-2" href="http://www.w2bc.com" rel="external nofollow" rel="external nofollow" ><span>Don</span><span>ate</span>
</a>
</article>
css3代码：
*, *:before, *:after
{
margin:;
padding:;
-moz-box-sizing: border-box;
box-sizing: border-box;
} body
{
text-align: center;
font-family: 'Droid Serif' , serif;
background-color: #fafafa;
} article
{
padding: 6rem 1rem;
border-bottom: 1px solid #ebeaea;
}
article p
{
display: block;
max-width: 50rem;
margin: 0 auto;
color: grey;
text-align: left;
font-size: 1.2rem;
line-height: 1.7rem;
}
article p::-moz-selection
{
color: black;
background-color: #fae900;
}
article p::selection
{
color: black;
background-color: #fae900;
}
article p a
{
color: #0079c2;
text-decoration: none;
-webkit-transition: all .15s;
transition: all .15s;
}
article p a:hover
{
background-color: #fae900;
color: black;
}
article p a::-moz-selection
{
color: black;
background-color: #fae900;
}
article p a::selection
{
color: black;
background-color: #fae900;
} .btn-fold-1
{
position: relative;
display: inline-block;
width: 28rem;
z-index:;
font-family: 'Varela Round' , sans-serif;
text-decoration: none;
font-size: 2.5rem;
color: black;
text-transform: uppercase;
letter-spacing: 0.1rem;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 200%;
perspective-origin: 50% 200%;
-webkit-transform: translateX(-25%) translateZ(0);
transform: translateX(-25%) translateZ(0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
}
.btn-fold-1 span
{
position: relative;
display: block;
width: 50%;
float: left;
padding-top: 1rem;
padding-bottom: .7rem;
text-align: right;
}
.btn-fold-1 span:last-child
{
z-index:;
padding-right: 1rem;
padding-left: .6rem;
text-align: left;
background-color: #fae900;
}
.btn-fold-1 span:first-child
{
z-index:;
padding-right: .6rem;
padding-left: 1rem;
pointer-events: none;
background-color: #fae900;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: rotateY(179.9deg);
transform: rotateY(179.9deg);
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
.btn-fold-1 span:first-child:before
{
content: 'Donate';
position: absolute;
top:;
right:;
bottom:;
left:;
padding-top: 1rem;
z-index:;
color: white;
text-align: center;
background-color: #0079c2;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition: color 0s 0.2s, background-color 0s 0.2s;
transition: color 0s 0.2s, background-color 0s 0.2s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.btn-fold-1:hover
{
-webkit-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0);
}
.btn-fold-1:hover > span:first-child
{
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.btn-fold-1:hover > span:first-child:before
{
color: transparent;
background-color: transparent;
} .btn-fold-2
{
position: relative;
display: inline-block;
width: 14rem;
z-index:;
font-family: 'Varela Round' , sans-serif;
color: white;
text-decoration: none;
font-size: 2.5rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
background-color: #0079c2;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateX(0.5rem);
-ms-transform: translateX(0.5rem);
transform: translateX(0.5rem);
-webkit-transition: background-color 0s 0.2s ease-in-out;
transition: background-color 0s 0.2s ease-in-out;
}
.btn-fold-2 span
{
position: relative;
width: 50%;
float: left;
padding-top: 1rem;
padding-bottom: .7rem;
pointer-events: none;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 400px;
perspective: 400px;
-webkit-perspective-origin: 50% 200%;
perspective-origin: 50% 200%;
}
.btn-fold-2 span:after
{
position: absolute;
top:;
right:;
bottom:;
left:;
-webkit-transition: -webkit-transform 0.4s, opacity 0s 0.2s ease-in-out;
transition: transform 0.4s, opacity 0s 0.2s ease-in-out;
}
.btn-fold-2 span:first-child
{
z-index:;
opacity:;
text-align: right;
background-color: #0079c2;
box-shadow: -1rem 0 0 #0079c2;
-webkit-transition: opacity 0s;
transition: opacity 0s;
}
.btn-fold-2 span:first-child:after
{
content: 'ate';
opacity:;
padding-top: 1rem;
text-align: left;
background-color: #0079c2;
-webkit-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: translateX(100%) rotateY(0);
transform: translateX(100%) rotateY(0);
}
.btn-fold-2 span:last-child
{
z-index:;
text-align: left;
color: black;
background-color: #fae900;
}
.btn-fold-2 span:last-child:after
{
content: 'don';
opacity:;
padding-top: 1rem;
text-align: right;
background-color: #fae900;
box-shadow: -1rem 0 0 #fae900;
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: translateX(-100%) rotateY(180deg);
transform: translateX(-100%) rotateY(180deg);
}
.btn-fold-2:hover
{
background-color: #fae900;
}
.btn-fold-2:hover > span:first-child
{
opacity:;
-webkit-transition: opacity 0s 0.4s;
transition: opacity 0s 0.4s;
}
.btn-fold-2:hover > span:first-child:after
{
opacity:;
-webkit-transform: translateX(100%) rotateY(-180deg);
transform: translateX(100%) rotateY(-180deg);
}
.btn-fold-2:hover > span:last-child:after
{
opacity:;
-webkit-transform: translateX(-100%) rotateY(0.1deg);
transform: translateX(-100%) rotateY(0.1deg);
}
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/6974
