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>