Shuboanator

<style>* { margin: 0; padding: 0; }

.container {
	margin: 50px auto auto 100px;
	position: relative;
	display:inline-block;
	width: 228px;
	height: 256px;
	/* задаем глубину сцене */
	-webkit-perspective: 600px; /* webkit */
	-moz-perspective: 600px; /* mozilla */
	-ms-perspective: 600px; /* IE 10 */
	-o-perspective: 600px; /* opera когда-то тоже должна начать понимать */
	perspective: 600px;	/* св-во по стандатам */
}

#card { /* поворачивать будем общий контейнер */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;

	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	-ms-transition: -moz-transform 0.5s;
	-o-transition: -o-transform 0.5s;
	transition: transform 0.5s; /* трансформации будут происходить анимированно продолжительностью 0.5 сек */
	
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;	/* указываем, что дочерние элементы находятся в 3D пространстве */
}
#card.flip {	/* добавляя этот класс, поворачивеам контейнер на 180 градусов */
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	-o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}

figure {
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;	/* если элемент отвернут лицом от пользователя, контент этого элемента не виден */
}
.back {
	background: url(img/bgplus1.png);
}
.front {
	background: url(img/bgplus.png);
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );	/* в начальном положении фэйс карты к нам развернут на 180 градусов */
}</style>

<div class="container" id="container">
					<div id="card">
                        <figure class="back"></figure>
                        <figure class="front">adsads</figure>
					</div>
				</div>
                
                 <div class="container" id="container1">
					<div id="card1">
                        <figure class="back"></figure>
                        <figure class="front">adsadsds</figure>
					</div>
				</div>