rotation 3d

by Daniel Beff

HTML

<div class="card">
    <div class="front">

    </div>
    <div class="back">
        back
    </div>

</div>

SCSS

.card {
	position:relative;

	.front {
		position: absolute;
		background: yellow;
		border-radius: 4px;
		width: 300px;
		height: 300px;
		backface-visibility: hidden;
		transition: 1s all;
		transform: rotateY(0deg);
		background: url(https://verkaufen.rakuten.de/wp-content/uploads/sites/2/2017/03/Rakuten_0001_Svh24.jpg);
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-position: center center;
	}
	
	.back {
		position: absolute;
		background: blue;
		border-radius: 4px;
		width: 300px;
		height: 300px;
		transform: rotateY(180deg);
		backface-visibility: hidden;
		transition: 1s all;
	}
	
	&:hover {
		.front {
			transform: rotateY(180deg);
		}
		.back {
			transform: rotateY(0deg);
		}
	}
	
}