CSS3 鼠标悬停显示另一面-蒲公英云

CSS3 鼠标悬停显示另一面

Myth丶恋晨 2022-07-11 12:24 323阅读 0赞

根据CSS3中的3D特性，当鼠标放上去，反转显示另一面，

源码如下：(代码没考虑浏览器兼容性问题，本代码以Chrome谷歌浏览器测试)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            width:200px;
            height:200px;
            box-shadow: 2px 2px 1px #999;
            margin:160px auto;
        }
        .item{
            /* width: 100%;
            height: 100%;*/
            position:relative;
            /*设置3d特效*/
            transform-style: preserve-3d;
            /*设置过滤效果*/
            transition: transform 1s;
        }
        .item>img{
            display: block;
            position:absolute;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
        }
        .item>div{
            position: absolute;
            left:0px;
            top:0px;
            width:200px;
            height:200px;
            background-color: #963;
            transform: rotateY(180deg);
        }
        .container:hover .item{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <img src="01.jpg" alt=""/>
            <div>这是反面内容</div>
        </div>
    </div>
</body>
</html>