Как перевернуть изображение с помощью CSS без JavaScript

Сегодня мы с Вами рассмотрим как перевернуть изображение с помощью CSS, не прибегая к JavaScript. Это довольно простая процедура — не займет много времени, а эффект весьма и весьма интересный. Пример такого переворота можно посмотреть на живом сайте здесь. Также хочу сообщить, что код  не мой, нашел на просторах интернета, но сам активно им пользуюсь. Поэтому и с Вами делюсь.

Итак, приступим к нашей задачи. Всего у нас будет два вида кода. Первый: это мы вставляем непосредственно в код нашего сайта, в том месте, где хотим получить наш эффект. Вот код:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
   <div class="flipper">
        <div class="front">
        	<!-- front content -->
        	<img src="img/pm1.png" width="100" height="78" alt="">
        </div>
        <div class="back">
       		<!-- back content -->
            <img src="img/pm1.png" width="100" height="78" alt="">
        </div>
    </div>
</div>

Как видно из данного кода, у нас будет первый div фронтальный и div заднего порядка, который собственно и будет показываться при наведении мышкой на объект. Данный способ флипа весьма удобен тем, что можно не только изображения переворачивать, но и создавать эффект внутреннего содержания, то есть при наведении на объект будет появляться информация, которая будет скрыта под изображением, мне кажется очень эффектно.

Перевернуть изображение с помощью CSS

.flip-container {
perspective: 1000;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 172px;
height: 94px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg);
-moz-transform: rotateY(90deg);
}

Вот собственно и все. Теперь все это дело может переворачиваться как нашей душе угодно. Кстати, меняя свойства transform, Вы можете переворачивать по-вертикали, по горизонтали, да в принципе как угодно. Поэтому пользуйтесь на здоровье и не забывайте комментировать… может, где я ошибся или сказал что-то не так. Также, если вдруг что-то не получается, также смело пишите в комментариях, будем разбираться с Вашей ситуацией.

P.S. Данное решение не работает в IE (Internet Explorer). Поэтому, если Вы еще пользуетесь этим шлаком, то это прекрасная возможность перейти, наконец, на Google Chrome.