CSS3 鼠标悬停显示另一面

Myth丶恋晨 2022-07-11 12:24 207阅读 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>

打开浏览器，显示

![20170125202512906][]

鼠标放上去后，显示

![20170125202602738][]

[20170125202512906]: /images/20220711/70f2f4d190fb45db8d54c96e04bf9fc9.png
[20170125202602738]: /images/20220711/bf13de3f24a74accb25292d58e4f169c.png