CSS-Flipbox

CSS Only Flip Effect

View the Project on GitHub sixertoy/css-flipbox

Middle horizontal axis 

.flipbox.flipbox-page.flipbox-horizontal{
    .flipbox(800px, 320px, 0.6s);
    margin: 60px auto;
    .card-cover{
        background: #ACE539;
    }
    .card-content-top,
    .card-content-bottom{
        background: rgba(0, 0, 0, 0.25);
    }
}

Title background

lorem ipsum dolor sit amet consectuer

Vertical axis 

.flipbox.flipbox-vertical
    .flipbox-extend(740px, 320px, 2s);
    margin: 20px auto;
    .card-cover{
        background: #ACE539;
    }
    .card-content {
        color: #FFF;
        background: rgba(51, 51, 51, 1);
    }
}

Vertical flip axis

<div class="flipbox flipbox-simple flipbox-vertical">
    <div class="wrapper">
        <div class="card card-cover" style="background: url(http://placehold.it/740x320);">
        </div>
        <div class="card card-content">
            <h1><span>Lorem ipsum dolor sit amet</span></h1>
            <p>Consectetur adipiscing elit. Ut ut est metus. Nullam imperdiet efficitur erat non accumsan. In molestie venenatis eros eget ullamcorper. Cras volutpat tellus ornare mattis mattis. Vestibulum vestibulum a orci vestibulum dictum.</p>
        </div>
    </div>
</div>

Horizontal axis 

.flipbox.flipbox-horizontal{
    .flipbox-extend(740px, 320px, 2s);
    margin: 20px auto;
    .card-cover{
        background: #ACE539;
    }
    .card-content {
        color: #FFF;
        background: rgba(51, 51, 51, 1);
    }
}

Horizontal flip axis

<div class="flipbox flipbox-simple flipbox-horizontal">
    <div class="wrapper">
        <div class="card card-cover" style="background: url(http://placehold.it/740x320);">
        </div>
        <div class="card card-content">
            <h1><span>Lorem ipsum dolor sit amet</span></h1>
            <p>Consectetur adipiscing elit. Ut ut est metus. Nullam imperdiet efficitur erat non accumsan. In molestie venenatis eros eget ullamcorper. Cras volutpat tellus ornare mattis mattis. Vestibulum vestibulum a orci vestibulum dictum.</p>
        </div>
    </div>
</div>