CSS3特效之翻转

最新推荐文章于 2021-08-04 07:02:14 发布

原创最新推荐文章于 2021-08-04 07:02:14 发布 · 864 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#翻转特效

前端小实例专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的鼠标悬停图片翻转效果。通过设置3D旋转和平面透视等属性，当鼠标悬停在图片上时，图片会翻转展示另一面的内容。

这里写图片描述

鼠标悬停，图片翻转

这里写图片描述

<!doctype html>
<html>
     <head>
            <meta charset="UTF-8">
            <meta name="Generator" content="EditPlus®">
            <meta name="Author" content="">
            <meta name="Keywords" content="">
            <meta name="Description" content="">
            <title>Document</title>
            <style>
                #container:before{
                    content:"";
                    display:table;
                }
                #container{
                    width:250px;
                    height:250px;
                    border-radius:50%;
                    background:-webkit-radial-gradient(circle,#FFFFFF,#F4F4F4,#D3D3D3);
                    margin:auto;
                    margin-top:100px;
                }
                #wrap{
                    -webkit-perspective:500px;
                    width:200px;
                    height:200px;
                    border-radius:50%;
                    background-color:#fff;
                    margin:auto;
                    margin-top:25px;
                }
                #images{
                    -webkit-transform-style:preserve-3d;
                    -webkit-transition:1.5s;
                    position:relative;
                }
                #wrap:hover #images{
                    -webkit-transform:rotateY(180deg);
                }
                #images>div{
                    position: absolute;
                    -webkit-backface-visibility:hidden;
                }
                div.back {
                    -webkit-transform:rotateY(180deg);
                    }
                img{
                    width:200px;
                    height:200px;
                    border-radius:50%;
                }
            </style>
     </head>
     <body>
        <div id="container">
            <div id="wrap">
                <div id="images">
                    <div class="front">
                        <img src="images/huan.jpg"/>
                    </div>
                    <div class="back">
                        <img src="images/love.jpg">
                    </div>
                </div>
            </div>
        </div>
     </body>
</html>