A Flip button implemented by pure css3 and a flip button of css3

Source: Internet
Author: User

A Flip button implemented by pure css3 and a flip button of css3

Previously we introduced a lot of beautiful buttons implemented by pure css3. Today, I want to share a flip button for the pure css3 implementation with other users. Two flip effects are provided in implementation. One is based on the left edge of the button as the center line, and the other is based on the center line of the button. Let's take a look:


Download Online Preview source code


Implemented code

Html code:

 <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 code:

 *, *: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);        }

Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/6974

CSS3 flip pictures

There is no answer to your question. I just want to insert a sentence when I see your question. Note: You have implemented the webkit prefix in this way. You don't have to use the webkit kernel browser. You should write:
Transform: rotate (180deg );
-Ms-transform: rotate (180deg);/* IE 9 */
-Moz-transform: rotate (180deg);/* Firefox */
-Webkit-transform: rotate (180deg);/* Safari and Chrome */
-O-transform: rotate (180deg);/* Opera */
Currently, the correct method is implemented by using JavaScript with css, and css3 is still early in popularity. Currently, mainstream browsers have different implementation methods for css3 and html5, so they must be set separately.

How to Use Css to create buttons and flip

Excuse me, dude! Paste it in the notepad file and save it as ###. html. Open it in a browser! Haha! Nonsense!
<Title> CSS creation and fashion navigation </title>
<Style type = "text/css">
Body {
Background-color: # FCC;
Color: # ffffff;
Font-size: 14px;
# Navigation {
Width: 150px;
Font-family: Arial;
# Navigation ul {
List-style-type: none;
Margin: 0px;
Padding: 0px;
# Navigation li {
Border-right: 2px solid # FC0;
# Navigation li {
Display: block;
Padding: 5px 5px 5px 2px;
Text-decoration: none;/* remove the underline */
Border-right: 3px solid #690512;
Border-bottom: 3px solid #690512;
Border-left: 3px solid # afaf;
Border-top: 3px solid # ffffff;
# Navigation li a: link, # navigation li a: visited {
Background-color: # c11136;
Color: # FFFFFF;
# Navigation li a: hover {
Background-color: # FF0;
Color: # F00;

<Div id = navigation>
<Li> <a href = "#"> Homepage </a> </li>
<Li> <a href = "#"> Myblog </a> </li>
<Li> <a href = "#"> About us </a> </li>
<Li> <a href = "#"> My music </a> </li>
<Li> <a href = "#"> My Diary </a> </li>
<Li> <a href = "#"> Play </a> </li>
<Li> <a href = "#"> Learn </a> </li>
<Li> <a href = "#"> Sing </...... remaining full text>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.