Закрыть меню
  1. Главная страница
  2. HTML и CSS
  3. 3D-эффект переворачивания карточки на HTML и CSS

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

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

Посмотреть результат
Эффект переворачивания карточки
Эффект переворачивания карточки на 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. Это для меня самая лучшая благодарность. Всем до новых встреч.

Поделиться:
Комментарии: