Double-sided image

Double-sided image

// HTML

<div class="actors">
<div class="face">
<img src="img/abfab_lumley300.jpg" alt="Joanna Lumley">
</div>
<div class="flag">
<h6>Джоанна<br>Ламли</h6>
<img src="img/ukflaground.svg" alt="British flag">
</div>
</div>


// CSS
// In parent element - +perspective(700)
.actors
			cursor: pointer
			margin-bottom: 10em
			position: relative
			+transition-duration(.7s)
			+transition-property(transform)
			+transform-style(preserve-3d)
			+transition-timing-function($base-timing)
			width: 80%
			&:hover
				+transform(rotateY(180deg))
			.face, .flag
				+backface-visibility(hidden)
				left: 0
				position: absolute
				+size(100%)
				top: 0
			.flag
				+transform(rotateY(180deg))
				h6
					font-family: Roboto, sans-serif
					font-size: $base-font-size*.8
					@include absolute-center
					margin-top: 48%
					z-index: 2
				img
					position: absolute
					z-index: 0