Как перевернуть изображение с помощью CSS без JavaScript
Блог
Делимся с Вами своими знаниями и новостями
15.04.2017

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

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

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

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

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

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

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

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

Метки:

Комментарии:

Свяжитесь с нами уже сейчас




Отправляя нам сообщение, содержащее Ваши персональные данные, Вы соглашаетесь с нашей политикой конфиденциальности.
Онлайн заявка


Отправляя нам сообщение, содержащее Ваши персональные данные, Вы соглашаетесь с нашей политикой конфиденциальности.