Flip card effects swatchbook

If you want a flip card effect, you can use jquery + CSS3 to achieve this effect. directly on the Code. demo at the bottom of the article: HTML: divdivspanspanh4spanAllSettingsspanh4divdivspanclasssb-iconicon-

If you want a paging card, you can use jquery + CSS3 to achieve this effect. directly upload the code. demo at the bottom of the article: HTML: p id = "sb-container" class = "sb-container" p span class = "sb-icon-cog"/span h4spanAll Settings/span/h4/p span class = "sb-icon-

Do you want a flip card... You can use jquery + CSS3 to achieve this effect.

Directly upload the code .... Demo is at the bottom of the article:

HTML:

    
                All Settings    
    
                User Modes    
        
        
      
        
     
        Profile        We ? color    

 

? CSS:

.sb-container {    position: relative;    width: 150px;    height: 400px;    margin: 30px auto 0 auto;}.sb-container p {    position: absolute;    top: 0;    left: 0;     width: 130px;    background: #fff;    height: 400px;    border-radius: 5px;    cursor: pointer;    text-align: center;    background-image: url(../images/fabric.png);    transform-origin: 25% 90%;    backface-visibility: hidden;}.sb-container p:nth-child(1){    background-color: #ea2a29;    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);}.sb-container p:nth-child(2){    background-color: #f16729;    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1);}.sb-container p:nth-child(3){    background-color: #f89322;    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2);}.sb-container p:nth-child(4){    background-color: #ffcf14;    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2);}.sb-container p:nth-child(5){    background-color: #ffea0d;    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3);}.sb-container p:nth-child(6){    background-color: #87b11d;    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3);}.sb-container p:nth-child(7){    background-color: #008253;    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4);}.sb-container p:nth-child(8){    background-color: #3277b5;    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4);}.sb-container p:nth-child(9){    background-color: #4c549f;    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4);}.sb-container p:nth-child(10){    background-color: #764394;    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4);}.sb-container p:nth-child(11){    background-color: #ca0d86;    box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4);}.sb-container p:last-child{    background: #645b5c url(../images/cover.jpg) repeat center center;    box-shadow:         -1px -1px 3px rgba(0,0,0,0.2),        12px 12px 20px rgba(0,0,0,0.6),        inset 2px 2px 0 rgba(255, 255, 255, 0.1);}.sb-container p:last-child:after{    content: '';    position: absolute;    bottom: 15px;    left: 15px;    width: 20px;    height: 20px;    border-radius: 50%;    background: #dddddd;    background: linear-gradient(135deg, #dddddd 0%,#58535e 48%,#889396 100%);    box-shadow: -1px -1px 1px rgba(0,0,0,0.5), 1px 1px 1px rgba(255,255,255,0.1);}.sb-container p h4{    color: rgba(255,255,255,0.9);    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);    font-weight: 700;    font-size: 16px;    text-transform: uppercase;    border-top: 1px dashed rgba(0,0,0,0.1);    border-bottom: 1px dashed rgba(0,0,0,0.1);    margin: 5px;    padding: 5px;    user-select: none;}.sb-container p:last-child h4{    background: rgba(0,0,0,0.2);    box-shadow: 0 1px 1px rgba(255,255,255,0.1);}.sb-container p:last-child h5{    font-size: 50px;    white-space: nowrap;    text-align: left;    margin: 0;    padding: 0;    position: absolute;    line-height: 50px;    top: 0px;    left: 0px;    color: #111;    text-shadow: -1px -1px 1px rgba(255,255,255,0.1);    text-transform: uppercase;    transform: rotate(-90deg) translateX(-157%) translateY(73px);    transform-origin: 0 0;    user-select: none;}span.sb-icon{    display: block;    height: 70px;    width: 70px;    margin: 20px auto;    user-select: none;}span.sb-icon:before {    font-family: 'icons';    font-style: normal;    font-weight: normal;    speak: none;    display: block;    text-decoration: inherit;    text-align: center;    text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);     line-height: 64px;    width: 100%;    font-size: 60px;    color: #000;    text-shadow: 0 0 1px #000;}.icon-cog:before { content: '\35'; } /* '5' */.icon-flight:before { content: '\37'; } /* '7' */.icon-eye:before { content: '\34'; } /* '4' */.icon-install:before { content: '\39'; } /* '9' */.icon-bag:before { content: '\36'; } /* '6' */.icon-globe:before { content: '\38'; } /* '8' */.icon-picture:before { content: '\32'; } /* '2' */.icon-video:before { content: '\30'; } /* '0' */.icon-download:before { content: '\41'; } /* 'A' */.icon-mobile:before { content: '\42'; } /* 'B' */.icon-camera:before { content: '\33'; } /* '3' */

? Jquery:

$. SwatchBook. defaults = {// initial number center: 6, // number angleInc: 8, speed: 700, easing: 'hangzhou ', // amount in degrees for the opened item's next sibling proximity: 45, // amount in degrees between the opened item's next siblings neighbor: 4, // animate on load onLoadAnim: true, // if it shocould be closed by default initclosed: false, // index of the element that when clicked, triggers the open/close function // by default there is no such element closeIdx:-1, // open one specific item initially (overrides initclosed) openAt:-1 };

First write this ~~~~.. Sleepy ~~~

Original article address: Flip card effects swatch book, thanks to the original author for sharing.