3D-эффект переворачивания карточки на HTML и CSS

15 июня 2020

Всем привет. В этом посте я расскажу как сделать крутую 3D-анимацию переворота карточки при наведении. Использоваться будет только HTML и CSS.

Посмотреть результат

Содержание файлов:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D-эффект переворачивание карточки | Подпишись на канал!</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
</head>
<body>

<div class="card center">

    <div class="front">
        <img src="1.jpg" alt="">
    </div>

    <div class="back">

        <div class="back-content center">
            <h2>Aniskovich Anton</h2>
            <span>Подпишись на канал!</span>
            <span>и ставьте</span>
            <i class="fas fa-heart"></i>
        </div>

    </div>

</div>

</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    font-family: Roboto, sans-serif;
}

body{
    background-color: #333;
}

.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card{
    cursor: pointer;
    width: 340px;
    height: 480px;
}

.front,
.back{
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    position: absolute;
    transition: transform .6s linear;
}

.front img{
    height: 100%;
}

.front{
    transform: perspective(600px) rotateY(0deg);
}

.back{
    transform: perspective(600px) rotateY(180deg);
    background-color: #f1f1f1;
}

.back-content{
    width: 100%;
    text-align: center;
    color: #333333;
}

h2{
    margin-bottom: 20px;
}

span{
    display: block;
    font-size: 20px;
}

.fas{
    display: block;
    margin: 20px 0;
    color: red;
    font-size: 30px;
}

.card:hover > .front{
    transform: perspective(600px) rotateY(-180deg);
}
.card:hover > .back{
    transform: perspective(600px) rotateY(0deg);
}

Исходные изображения:

Исходные изображения

Рабочий результат

See the Pen WNrGxoO by AntonAniskovich (@AntonAniskovich) on CodePen.

Видео с пошаговой инструкцией

Дорогие друзья если Вам понравилась статья и Вы хотите меня поддержать, то подписывайтесь на мой блог и канал на youtube. Это для меня самая лучшая благодарность. Всем до новых встреч.