一款纯css3实现的翻转按钮
浏览数：33 /
时间：2015年06月09日
之前为大家介绍了好多纯css3实现的很漂亮的按钮。今天小编要给各网友再分享一款纯css3实现的翻转按钮。实现中给出了两种的翻转特效，一种是基于按扭的左边缘为中心线，另一种是基于按钮的中间为中心线。我们一起看下效果图：
实现的代码
html代码：
<article> <a target="_blank" class="btn-fold-1" href="http://www.w2bc.com"><span>Donate</span><span>to RIF</span> </a> <a target="_blank" class="btn-fold-2" href="http://www.w2bc.com"><span>Don</span><span>ate</span> </a> </article>
css3代码：
*, *:before, *:after { margin: 0; padding: 0; -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: 1; 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: 2; padding-right: 1rem; padding-left: .6rem; text-align: left; background-color: #fae900; } .btn-fold-1 span:first-child { z-index: 3; 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: 0; right: 0; bottom: 0; left: 0; padding-top: 1rem; z-index: 4; 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: 1; 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: 0; right: 0; bottom: 0; left: 0; -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: 3; opacity: 1; 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: 1; 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: 2; text-align: left; color: black; background-color: #fae900; } .btn-fold-2 span:last-child:after { content: ‘don‘; opacity: 0; 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: 0; -webkit-transition: opacity 0s 0.4s; transition: opacity 0s 0.4s; } .btn-fold-2:hover > span:first-child:after { opacity: 0; -webkit-transform: translateX(100%) rotateY(-180deg); transform: translateX(100%) rotateY(-180deg); } .btn-fold-2:hover > span:last-child:after { opacity: 1; -webkit-transform: translateX(-100%) rotateY(0.1deg); transform: translateX(-100%) rotateY(0.1deg); }
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/6974
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
