Aggiungere un effetto rotazione alle cards di Bootstrap

by Code4Life

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="demo-content py-3">
	<div class="rotate-container mx-auto">
        <div class="card card-front">
            <div class="card-body">
                <div class="h5 card-title">Card title</div>
                <div class="h6 card-subtitle mb-2 text-muted">Card front side</div>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <button class="btn btn-secondary btn-rotate">Rotate me!</button>
            </div>
        </div>
        <div class="card card-back">
            <div class="card-body">
                <div class="h5 card-title">Card title</div>
                <div class="h6 card-subtitle mb-2 text-muted">Card back side</div>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <button class="btn btn-dark btn-rotate">Go back</button>
            </div>
        </div>
    </div>
</div>

<!-- Credits -->
<div class="credits">
	<a class="btn-credits" href="https://code4life.it/guide/aggiungere-un-effetto-rotazione-alle-cards-di-bootstrap/" target="_blank">Vedi articolo completo</a>
</div>

CSS

/*
 * TITLE:   Aggiungere un effetto rotazione alle cards di Bootstrap
 * AUTHOR:  Code4Life
 * WEBSITE: https://code4life.it/
 * ARTICLE: https://code4life.it/guide/aggiungere-un-effetto-rotazione-alle-cards-di-bootstrap/
 */

/* Required snippet style */
.rotate-container { position: relative; }
.rotate-container .card-front,
.rotate-container .card-back {
	width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: all 0.5s linear 0s;
}
.rotate-container .card-front {
	-webkit-transform: perspective(600px) rotateY(0deg);
	transform: perspective(600px) rotateY(0deg);
}
.rotate-container .card-back {
	-webkit-transform: perspective(1600px) rotateY(180deg);
	transform: perspective(1600px) rotateY(180deg);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.rotate-container .card-front.rotate {
	-webkit-transform: perspective(1600px) rotateY(-180deg);
	transform: perspective(1600px) rotateY(-180deg);
}
.rotate-container .card-back.rotate {
	-webkit-transform: perspective(1600px) rotateY(0deg);
	transform: perspective(1600px) rotateY(0deg);
}
.rotate-container .card-front .btn-rotate,
.rotate-container .card-back .btn-rotate { position: static; z-index: 0; }
 
/* Demo style only */
.demo-content { margin-bottom: 70px; text-align: center; }
.rotate-container { width: 300px; }

/* Credits */
@import url( 'https://fonts.googleapis.com/css?family=Roboto:300' );
.credits { background: #F3F5F6; border: solid 1px #CFD6D9; bottom: 40px; left: 0; padding: 10px; position: fixed; right: 0; text-align: center; z-index: 1000; }
.btn-credits { border: 2px solid #33b5e5; border-radius: 10em; color: #33b5e5 !important; display: inline-block; font-family: 'Roboto', sans-serif; font-size: .8rem; line-height: 1.25; padding: .85rem 2.13rem; text-decoration: none; text-transform: uppercase; transition: .2s ease-out; vertical-align: middle; }
.btn-credits:hover { background-color: #33b5e5; color: #fff !important; }

JavaScript

jQuery( function( $ ) {
	$( '.btn-rotate' ).click( function( e ) {
		e.preventDefault();
		$( this ).parents( '.rotate-container' ).find( '.card-front, .card-back' ).toggleClass( 'rotate' );
	} );
} );