CSS实现图片翻转效果

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片翻转测试</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="pic_list">
    <div class="pic_box">
        <div class="face"><img src="image/1.jpg"></div>
        <div class="back_face"><h2>第一张</h2></div>
    </div>
    <div class="pic_box">
        <div class="face"><img src="image/2.jpg"></div>
        <div class="back_face"><img src="image/1.jpg"></div>
    </div>
    <div class="pic_box">
        <div class="face"><img src="image/3.jpg"></div>
        <div class="back_face"><h2>第三张</h2></div>
    </div>
</div>
</body>
</html>

CSS部分

*{
    margin: 0;
    padding: 0;
}

.pic_list{               /*后面灰色背景*/
    width: 1200px;
    height: 530px;
    position: relative;
    background-color: darkgrey;
    margin: auto;
    top: 100px;
}
.pic_box{               /*存放每个图片的盒子*/
    width: 380px;
    height: 480px;
    position: relative;
    float: left;
    top: 30px;
    margin-left: 15px;
    transform-style: preserve-3d;    /*子代保留3d*/
    transition: 1.5s;                /*过渡时间*/
}
.pic_box img{     /*设置图片宽高*/
    width: 380px;
    height: 480px;
}

.pic_box:hover{
    transform: rotateY(180deg);             /*绕Y轴旋转180度*/
    -moz-transform: rotateY(180deg);        /*浏览器兼容 火狐浏览器*/
    -o-transform: rotateY(180deg);          /*浏览器兼容 氧浏览器*/
    -ms-transform: rotateY(180deg);         /*IE浏览器*/
    -webkit-transform: rotateY(180deg);     /*谷歌浏览器 和Safari浏览器*/
}
.face{           /*正面样式*/
    width: 380px;
    height: 480px;
    /*border: 2px solid white;*/
    position: absolute;
}
.pic_box:hover .back_face{         /*旋转后让反面内容显示出来*/
    opacity: 1;
}
.back_face{      /*图片反面内容*/
    width: 380px;
    height: 480px;
    /*border: black 2px solid;*/
    position: absolute;
    opacity: 0;                     /*先让他隐藏*/
    background-color: rgba(255,255,255,1);
    /*为了让反面内容正确显示 所以让反面内容旋转*/
    transform: rotateY(180deg);             /*绕Y轴旋转180度*/
    -moz-transform: rotateY(180deg);        /*浏览器兼容 火狐浏览器*/
    -o-transform: rotateY(180deg);          /*浏览器兼容 氧浏览器*/
    -ms-transform: rotateY(180deg);         /*IE浏览器*/
    -webkit-transform: rotateY(180deg);     /*谷歌浏览器 和Safari浏览器*/
    transition: 1.5s;                    /*增加过度时间*/
}
.back_face h2{
    text-align: center;
}

酸霉汤

发布了18 篇原创文章 · 获赞 0 · 访问量 272

私信关注

CSS实现图片翻转效果

HTML部分

CSS部分

猜你喜欢