两张图片切换,这也是我们平时比较常见的技术,末班在这里,随拿随用,只需要把照片换一下就可以了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
//最外层图片设置
.box{
width: 500px;
perspective: 1000px;
margin: 0 auto;
position: relative;
}
//box 下面所有照片设置定位,背面不可见,把背面隐藏,
.box img{
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
//因为第二张图片反过来的时候是正的,所以提前先把后面翻转180度
.box img:nth-of-type(2){
transform: rotateX(-180deg);
}
//动画效果,2秒钟完成
.box img{
transition:all 2s;
}
//鼠标悬浮的时候第一张照片旋转180度,第二张照片回到0度
.box:hover img:nth-of-type(1){
transform: rotateX(180deg);
}
.box:hover img:nth-of-type(2){
transform: rotateX(0deg);
}
</style>
</head>
<body>
<div class="box">
<img src="../day13-css动画/img/try3.jpg" >
<img src="../day13-css动画/img/try4.jpg" >
</div>
</body>
</html>