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

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!
<Html>
<Head>
<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;
}
</Style>
</Head>

<Body>
<Div id = navigation>
<Ul>
<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>