Flip cards 3D CSS

Half flip cards 3d con un estilo similar a un libro

By David Foliti 

HTML

<section id="section-feature" class="container">
<div class="row">
<ul>
<li id="sf-innovation" class="col-md-3 col-sm-6 col-xs-12">
<div class="sf-wrap">
<div class="sf-mdl-left">
<div class="sf-icon">
<i class="fa fa-fw fa-rocket fa-5x"></i>
</div>
<h3>Gallia est omnis</h3>
</div>
<div class="sf-mdl-right">
<div class="sf-icon">
<i class="fa fa-fw fa-rocket fa-5x"></i>
</div>
<h3>Gallia est omnis</h3>
</div>


<div class="sf-mdl-left-full">
<div class="sf-icon">
<i class="fa fa-fw fa-rocket fa-5x"></i>
</div>
<h3><a href="#">Gallia est omnis</a></h3>
<p>Curabitur blandit tempus ardua ridiculus sed magna. Integer legentibus erat a ante historiarum dapibus.</p>
</div>
<div class="sf-mdl-right-full">
<div class="sf-icon">
<i class="fa fa-fw fa-rocket fa-5x"></i>
</div>
<h3><a href="#">Gallia est omnis</a></h3>
<p>Curabitur blandit tempus ardua ridiculus sed magna. Integer legentibus erat a ante historiarum dapibus.</p>
</div>
</div>
</li>


<li id="sf-community" class="col-md-3 col-sm-6 col-xs-12">
<div class="sf-wrap">
<div class="sf-mdl-left">
<div class="sf-icon">
<i class="fa fa-fw fa-camera-retro fa-5x"></i>
</div>
<h3>Donec sed operae</h3>
</div>
<div class="sf-mdl-right">
<div class="sf-icon">
<i class="fa fa-fw fa-camera-retro fa-5x"></i>
</div>
<h3>Donec sed operae</h3>
</div>


<div class="sf-mdl-left-full">
<div class="sf-icon">
<i class="fa fa-fw fa-camera-retro fa-5x"></i>
</div>
<h3><a href="#">Donec sed operae</a></h3>
<p>Hi omnes lingua, institutis, legibus inter se differunt. Donec sed odio operae, eu vulputate felis rhoncus.</p>
</div>
<div class="sf-mdl-right-full">
<div class="sf-icon">
<i class="fa fa-fw fa-camera-retro fa-5x"></i>
</div>
<h3><a href="#">Donec sed operae</a></h3>
<p>Hi omnes lingua, institutis, legibus inter se differunt. Donec sed odio operae, eu vulputate felis rhoncus.</p>
</div>
</div>
</li>


<li id="sf-academy" class="col-md-3 col-sm-6 col-xs-12">
<div class="sf-wrap">
<div class="sf-mdl-left">
<div class="sf-icon">
<i class="fa fa-fw fa-cloud-upload fa-5x"></i>
</div>
<h3>Hi omnes lingua</h3>
</div>
<div class="sf-mdl-right">
<div class="sf-icon">
<i class="fa fa-fw fa-cloud-upload fa-5x"></i>
</div>
<h3>Hi omnes lingua</h3>
</div>


<div class="sf-mdl-left-full">
<div class="sf-icon">
<i class="fa fa-fw fa-cloud-upload fa-5x"></i>
</div>
<h3><a href="#">Hi omnes lingua</a></h3>
<p>Nec dubitamus multa iter quae et nos invenerat. Ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
</div>
<div class="sf-mdl-right-full">
<div class="sf-icon">
<i class="fa fa-fw fa-cloud-upload fa-5x"></i>
</div>
<h3><a href="#">Hi omnes lingua</a></h3>
<p>Nec dubitamus multa iter quae et nos invenerat. Ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
</div>
</div>
</li>


<li id="sf-opportunity" class="col-md-3 col-sm-6 col-xs-12">
<div class="sf-wrap">
<div class="sf-mdl-left">
<div class="sf-icon">
<i class="fa fa-fw fa-star-half-o fa-5x"></i>
</div>
<h3>Idque Caesaris facere</h3>
</div>
<div class="sf-mdl-right">
<div class="sf-icon">
<i class="fa fa-fw fa-star-half-o fa-5x"></i>
</div>
<h3>Idque Caesaris facere</h3>
</div>


<div class="sf-mdl-left-full">
<div class="sf-icon">
<i class="fa fa-fw fa-star fa-5x"></i>
</div>
<h3><a href="#">Idque Caesaris facere</a></h3>
<p>Morbi fringilla convallis sapien, id pulvinar odio volutpat. Contra legem facit qui id facit quod lex prohibet.</p>
</div>
<div class="sf-mdl-right-full">
<div class="sf-icon">
<i class="fa fa-fw fa-star fa-5x"></i>
</div>
<h3><a href="#">Idque Caesaris facere</a></h3>
<p>Morbi fringilla convallis sapien, id pulvinar odio volutpat. Contra legem facit qui id facit quod lex prohibet.</p>
</div>
</div>
</li>
</ul>
</div>
</section>


CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800);
body{font-size:16px;line-height:22px;color:#555;font-family:Raleway,sans-serif;font-weight:300;text-shadow:rgba(0,0,0,.01) 0 0 1px}
#section-feature ul{margin:100px 0 0;padding:0;list-style:none;position:relative}
#section-feature li{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;height:240px;padding:2%;float:left;margin-bottom:40px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
#section-feature .sf-wrap{background-repeat:no-repeat;position:absolute;max-width:280px;width:100%;height:100%;left:50%;margin-left:-140px;top:0;-moz-perspective:600px;-webkit-perspective:600px;-ms-perspective:600px;-o-perspective:600px;perspective:600px;cursor:pointer}
.sf-mdl-left,.sf-mdl-left-full,.sf-mdl-right,.sf-mdl-right-full{position:absolute;left:0;top:0;width:50%;height:100%;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s;overflow:hidden}
.sf-icon{position:absolute;top:30px;text-align:center;left:0;width:200%;color:#e4610e}
.sf-mdl-left-full .sf-icon,.sf-mdl-right-full .sf-icon{color:#fff}
.sf-mdl-right,.sf-mdl-right-full{left:auto;right:0}
.sf-mdl-left-full,.sf-mdl-right-full{background-color:#333;z-index:9;color:#fff}
.sf-wrap a{color:#e4610e;text-decoration:none}
.sf-mdl-left,.sf-mdl-right{background-color:#fff;z-index:10}
.sf-wrap>.sf-mdl-right,.sf-wrap>.sf-mdl-right-full{background-position:right -30px}
.sf-wrap>.sf-mdl-left-full,.sf-wrap>.sf-mdl-right{-moz-backface-visibility:hidden;-moz-transform-style:preserve-3d;-moz-transform-origin:0 0;-moz-transform:rotateY(0deg);-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;-webkit-transform-origin:0 0;-webkit-transform:rotateY(0deg);-o-backface-visibility:hidden;-o-transform-style:preserve-3d;-o-transform-origin:0 0;-o-transform:rotateY(0deg);backface-visibility:hidden;transform-style:preserve-3d;transform-origin:0 0;transform:rotateY(0deg)}
.sf-wrap.hover>.sf-mdl-right{-webkit-transform:rotateY(-45deg);-moz-transform:rotateY(-45deg);-ms-transform:rotateY(-45deg);-o-transform:rotateY(-45deg);transform:rotateY(-45deg);background-color:#ececec}
.sf-wrap>.sf-mdl-left-full{-moz-transform-origin:100% 0;-webkit-transform-origin:100% 0;-o-transform-origin:100% 0;transform-origin:100% 0;-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}
.sf-wrap.active>.sf-mdl-right,.sf-wrap.hover.active>.sf-mdl-right{-moz-transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);transform:rotateY(-180deg)}
.sf-wrap.active>.sf-mdl-left-full{-moz-transform:rotateY(0deg);-webkit-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg)}
.active .sf-mdl-left-full,.active .sf-mdl-right-full{z-index:11}
.sf-wrap div h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:22px}
.sf-wrap div h3,.sf-wrap div p{width:200%;position:absolute;text-align:center;left:0;top:140px}
.sf-wrap div p{padding:0 10%;line-height:18px;font-size:13px;top:170px}
.sf-mdl-right .sf-icon,.sf-mdl-right-full .sf-icon,.sf-wrap div.sf-mdl-right h3,.sf-wrap div.sf-mdl-right p,.sf-wrap div.sf-mdl-right-full h3,.sf-wrap div.sf-mdl-right-full p{left:auto;right:0}
.sf-wrap div.sf-mdl-left-full h3,.sf-wrap div.sf-mdl-right-full h3{top:115px}

JS

$(function() {
    $('#section-feature .sf-wrap')
        .hover(function() {
            $(this).addClass('hover');
        }, function() {
            $(this).removeClass('hover');
        })
        .click(function(event) {
            $(this).toggleClass('active');
        });
});
¿Te gusto el post?
¡Compártelo!

☑ Puede que también te interese:

shopping card
Add to cart - carrito de compra
Flip Card CSS Effect Horizontal Vertical