Переворот блока на CSS3

HTML

<div class="grid-item">
    <div class="grid-item-wr">
        <div class="card card-women">
            <div class="face">
                <div class="product-photo">
                    <a href="item.html"><img src="http://placehold.it/400x400/" alt="Dolce&amp;Gabbana Anthology 3 L’Imperatrice"/></a>
                </div>
            </div>
            <div class="back">
                <div class="product-desc">
                    <div class="wr">
                        <h4><a href="item.html">Dolce&amp;Gabbana Anthology 3 L’Imperatrice</a></h4>
                        <div class="size">100 ml</div>
                        <div class="price"><strong>850</strong>&nbsp;рублей</div>
                    </div>
                </div>									
            </div>
        </div>
    </div>
</div>

CSS

.grid-item{
	width: 400px;
	position: relative;
}

.grid-item-wr{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}

.card{
	position: absolute;
	top: 10px;
	left: 10px;
	bottom: 10px;
	right: 10px;
	min-height: 127px;
}


.card .face,
.card .back{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-o-transition: all .7s ease;
	-ms-transition: all .7s ease;
	transition: all .7s ease;

	-webkit-transform: perspective(600px) rotateY(0deg);
	-moz-transform: perspective(600px) rotateY(0deg);
	-ms-transform: perspective(600px) rotateY(0deg);
	-o-transform: perspective(600px) rotateY(0deg);
	transform: perspective(600px) rotateY(0deg);

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.card .face{
	z-index: 2;
	background: #fff;

	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,.15);
	box-shadow: 0 1px 1px rgba(0,0,0,.15);
}

.card .back{
	z-index: 1;
	background: #fff;
	background-repeat: repeat;
	background-position: 50% 50%;

	-webkit-box-shadow: 0 1px 20px rgba(0,0,0,.15);
	-moz-box-shadow: 0 1px 20px rgba(0,0,0,.15);
	box-shadow: 0 1px 20px rgba(0,0,0,.15);

	-webkit-transform: perspective(600px) rotateY(-180deg);
	-moz-transform: perspective(600px) rotateY(-180deg);
	-ms-transform: perspective(600px) rotateY(-180deg);
	-o-transform: perspective(600px) rotateY(-180deg);
	transform: perspective(600px) rotateY(-180deg);
}

.card-men .back{background-image:...