图片切换这种效果在很多网站都有应用，那么怎么实现图片切换呢？接下来就给大家来介绍一下其实现的方法。
首先看效果：
切换前
切换后
要完成切换效果,我们分析如下：
1、先要准备两张图片。
2、两张图片要重叠在一起。
3、两张图片要“背靠背”，背向观众（转过去的）这张图要隐藏。
4、触发大盒子的hover事件，让两张图片同时转动。
5、该案例中用到的知识点有：
5.1 伪类 :hover
5.2 过渡：transition
5.3 旋转：transform: rotateY()
5.4 背面不可见： backface-visibility: hidden;
特别准备：为了看到效果，特意准备了一张大图，名叫yaojing2.jpg.
实现步骤如下：
第一步：布局
<div id="box">
<!--悟空图片在下-->
<div class="dy53b4-b16e-4050-554b wukong">
<img src="img/wukong.jpg"/>
</div>
<!--妖精图片在上 -->
<div class="dyb16e-4050-554b-53d6 yaojing">
<img src="img/yaojing2.jpg"/>
</div>
</div>
*{
margin: 0;
padding: 0;
}
#box{
width:191px ;
height:220px ;
margin: 50px;
}
初始效果
第二步:修改样式让两个子盒子重叠
#box{
width:191px ;
height:220px ;
margin: 50px;
position: relative;
}
#box div{
position: absolute;
top:0;left:0;
}
妖精就挡住了悟空
第三步: 让妖精先转180度,背对着我们，同时添加过渡.
/*让妖精转180度,背对着我们，此时应该隐藏*/
#box .yaojing{
transform: rotateY(180deg);
/*转过去背向舞台,隐藏*/
display: none;
}
#box div{
position: absolute;
top:0;left:0;
/*添加过渡*/
-webkit-transition: all 2s ease 0s;
}
现在是背对我们
此时妖精已经背对我们了，背对舞台的要隐藏，隐藏之后就看只看到悟空了.
#box .yaojing{
transform: rotateY(180deg);
/*转过去背向舞台,隐藏*/
display: none;
}
第四步：当盒子hover状态时要让妖精这个图转到0度。
/*hover状态时要让妖精这个图转0度,*/
#box:hover .yaojing{
/*要转回来***/
transform:rotateY(0deg);
/*要显示 **/
display: block;
}
但是现在有个问题，display没有过渡，所以我们使用另一个属性，来让背向舞台的图片隐藏。
修改代码：
#box .yaojing{
transform: rotateY(180deg);
/*转过去,隐藏*/
/*display: none;*/
/*背向舞台的图片要隐藏*/
backface-visibility: hidden;
}
#box:hover .yaojing{
/*要转回来***/
transform: rotateY(0deg);
/*要显示 **/
/*display: block;*/
}
此时就有过渡了
第五步:让悟空转起来：
/*hover：
状态时 悟空向正方向上转180度*/
#box:hover .wukong{
-webkit-transform:
rotateY(180deg);
}
可以看到悟空已经转到背面了
同样的需要把背向舞台的图片隐藏,修改代码为:
#box .wukong{
/*背向舞台的图片要隐藏*/
backface-visibility: hidden;
}
再把转换的时间改小，就ok
#box .wukong,#box .yaojing{
position: absolute;
top: 0px;
left: 0px;
transition: all 1s;
}
有问题请咨询官网：https://www.shanghaixdl.com/
本文来自作者[百里靓]投稿，不代表调研号立场，如若转载，请注明出处：https://kydy.org.cn/miao/3877.html
评论列表（4条）
我是调研号的签约作者“百里靓”！
希望本篇文章《div设置滚动条样式（css滚动条）》能对你有所帮助！
本站[调研号]内容主要涵盖：调研号,生活百科,小常识,生活小窍门,百科大全,经验网
本文概览： 图片切换这种效果在很多网站都有应用，那么怎么实现图片切换呢？接下来就给大家来介绍一下其实现的方法。 首先看效果：切换前...