Flip card effects swatchbook

Source: Internet
Author: User
Tags in degrees
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.

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.