<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>