利用纯css制作图片翻转

幸运小圣

已于 2023-06-02 15:02:00 修改

阅读量399

点赞数 1

文章标签： css css3 前端

于 2023-06-02 11:41:43 首次发布

本文链接：https://blog.csdn.net/qq_53002037/article/details/131003806

版权

见视频1效果，选取图片来自百度百科。如果侵权，联系删除。

css翻转

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        div {
            position: relative;
            width: 331px;
            height: 195px;
            margin: 100px auto;
            border: 1px solid red;
        }
        
        img {
            position: absolute;
            backface-visibility: hidden;
            transition: all 2s;
        }
        
        div img:first-child {
            transform: rotateX(-180deg);
        }
        
        div:hover img:last-child {
            transform: rotateX(180deg);
        }
        
        div:hover img:first-child {
            transform: rotateX(0deg);
        }
    </style>
</head>

<body>
    <div>
        <img src="./images/gamepic10.jpg" alt="">
        <img src="./images/gamepic2.jpg" alt="">
    </div>
</body>

</html>