<MyRusakov.ru />

Создание приложений для Android с нуля

Создание приложений для Android с нуля

Данный курс научит Вас создавать приложения любой сложности для Android. Курс состоит из 16-ти разделов, из которых Вы узнаете, как создавать свои собственные приложения для Android.

В курсе содержится вся необходимая теория, а также множество практических примеров, в том числе, и из моей личной практики.

Просмотрев данный курс и выполнив упражнения из него, Вы сможете создавать приложения любой сложности для самой популярной мобильной ОС в мире - Android.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Поворот карточки с картинкой в CSS

Поворот карточки с картинкой в CSS

На этом уроке мы разберем пример поворачивающейся карточки с картинкой. С лицевой стороны у карточки картинка, на обратной стороне - текст. При наведении мыши, карточка поворачивается на 180 градусов. Такой эффект можно применять к карточкам товара, к профилю соц. сетей и портфолио.

HTML разметка

Создадим div с классом wrapper, который обернёт всю карточку и займёт все пространство страницы. Внутри div-а обёртки будет находится сама карточка с блоком для картинки - front и с блоком обратной стороны - back.

<div class="wrapper">
  <div class="card">
    <div class="front"><img src="pillows.jpg"></div>
    <div class="back">
    <span>Описание подушки: стильная, качественная</span>
    </div>
  </div>
</div>

CSS код

Зададим блоку с классом wrapper абсолютное позиционирование, растянем его на всю страницу, указав ширину и высоту - 100% и привяжем к левому верхнему углу.

Установим какой-нибудь фоновый цвет.

background-color: #d5d5d5;

Далее оформляем div с классом card шириной и высотой по 350 пикселей.

.cards {
    width: 350px;
    height: 350px;
}

Карточку надо разместить в середине страницы, для класса wrapper применим flex-метод и расположим карточку в центре.

Поворот карточки с картинкой в CSS

Теперь мы видим, что карточка с картинкой находится в середине экрана.

Поворот карточки с картинкой в CSS

Местоположение div-а с классом card относительно оберточного div-а.

.card {
    position: relative;
}

Позиционируем две стороны карточки так, чтобы они наложились ровно друг на друга и занимали карточку родителя на 100%.

.front, .back {
    width: 100%;
    height: 100%;
}

Находились бы по центру страницы.

Поворот карточки с картинкой в CSS

Назначим для для обеих сторон фоновый цвет - белый.

.front, .back {
    background-color: #fff;
}

Картинка с подушками полностью заполняет фронтальную сторону карточки. Свойство max-width: 100% не позволяет картинке большего размера выйти за пределы карточки. А если размеры картинки меньше фронтального div-a, то свойство min-width: 100% растянет картинку на ширину и высоту родителя. Свойство height: auto не дает исказить пропорции картинки.

.front img {
    max-width: 100%;
    min-width: 100%;
    height: auto;
}

Обратная сторона карточки с подушками почему-то оказалась с текстом задом наперёд.

Поворот карточки с картинкой в CSS

Зададим свойство ниже для обеих сторон карточки - front и back, то есть скроем тыльную сторону.

backface-visibility: hidden;

Обратная сторона карточки товара стоит выше фронтальной, потому что в DOM дереве она стоит последней и перекрывает собой фронтальную. Как это исправить? Надо обратную сторону повернуть на 180 градусов по горизонтали и она окажется там где и должна быть - за фронтальной. Значит в состоянии покоя мы видим только фронтальную сторону карточки - картинку.

.back {
    transform: rotateY(180deg);
}

Для плавных hover переходов пропишем свойство transition.

.front, .back {
    transition: 1s;
}

Как мы увидим обратную сторону карточки товара? При наведении мышки на картинку должна появиться задняя сторона карточки, при убирании мышки снова появится картинка. Это реализовать очень просто с помощью псевдокласса hover и свойстав rotate.

.card:hover .front {
    transform: rotateY(180deg);
}
.card:hover .back {
    transform: rotateY(360deg);
}

Сейчас карточка переворачивается не красиво, как 2d, а чтобы она переворачивалась с 3d эффектом, зададим ей глубину - perspective.

.card {
    perspective: 1000px;
}

Код целиком и результат

See the Pen Card flip 3d by porsake (@porsake) on CodePen.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

master284 master284 22.07.2018 15:22:47

Здорово! А я на своей странице применил поворот в плоскости одной картинки. Вторую фото сделал фоном, что бы показать обратную сторону двери. Спасибо Михаилу за находчивость.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.