任务
实现以下效果：
思路
如同前面的案例 制作正方体 所示，首先需要通过定位技术将两个图片加上边框后进行叠加，使得小狗覆盖在小猫上。然后通过3D变换和过渡实现效果。
被覆盖的图片需要填充满整个父盒子，这样要进行覆盖的元素通过子绝父相定位技术才能盖住它
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01.html</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
/* margin塌陷，它们之间的距离只有50px，而不是100px */
margin: 50px auto;
position: relative;
/* 3D需要搭建舞台 */
perspective: 500px;
}
div img{
width: 200px;
height: 200px;
/* 消除小间隔/小白边 */
display: block;
border: 1px solid #000;
border-radius: 50%;
}
div img.dog{
position: absolute;
top: 0;
left: 0;
transition: transform .7s ease 0s;
}
/*
旋转轴和旋转方向是不同的，是个性；
其余是共性。
*/
.box1 img.dog{
/* 左上角或者右上角，即当绕X轴旋转时始终以上边框为轴，其余同理 */
/* transform-origin:0 0 ; 绕Y轴时是左边框为轴，绕X轴以上边框为轴*/
/* transform-origin:left ; */
transform-origin: 0 0;
}
.box1:hover img.dog{
transform: rotateY(-180deg);
}
.box2 img.dog{
transform-origin: 100% 0;
}
.box2:hover img.dog{
transform: rotateY(180deg);
}
.box3 img.dog{
transform-origin: 0 0;
}
.box3:hover img.dog{
transform: rotateX(180deg);
}
.box4 img.dog{
transform-origin: 0 100%;
}
.box4:hover img.dog{
transform: rotateX(-180deg);
}
</style>
</head>
<body>
<div class="box1">
<img src="images/cat.jpg" alt="" class="cat">
<img src="images/dog.jpg" alt="" class="dog">
</div>
<div class="box2">
<img src="images/cat.jpg" alt="" class="cat">
<img src="images/dog.jpg" alt="" class="dog">
</div>
<div class="box3">
<img src="images/cat.jpg" alt="" class="cat">
<img src="images/dog.jpg" alt="" class="dog">
</div>
<div class="box4">
<img src="images/cat.jpg" alt="" class="cat">
<img src="images/dog.jpg" alt="" class="dog">
</div>
</body>
</html>
