如何实现图标翻转180度后显示另一张图片

1.html结构:

< div class= " test ">

< img class= " one " src= " ./images/hotlink01.png " alt= "">

< img class= " two " src= " ./images/hotlink01_h.png " alt= "">

div>

当鼠标移入外层的div盒子子时,图片会翻转180度,并且显示图片的背面(即第二张图片),效果如下

2. css样式:

< style>

.test {

width : 103 px;

height : 103 px;

margin : 100 px auto;

position : relative;

}

img {

position : absolute;

transition : all 1 s;

}

.test : hover img {

transform : rotateY( 180 deg);

}

img .one {

/* 提高图片一的层级 */

z-index : 9;

             /* 当元素背面显示时,隐藏起来 */

backface-visibility : hidden;

}

style>