html图片切换特效(html点击图片切换图片)

　　图片切换这种效果在很多网站都有应用，那么怎么实现图片切换呢？接下来就给大家来介绍一下其实现的方法。

　　首先看效果：

切换前

切换后

　　要完成切换效果,我们分析如下：

　　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="wukong">

　　<img src="img/wukong.jpg"/>

　　</div>

　　<!--妖精图片在上 -->

　　<div class="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/