HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<img src="img/1.jpg" >
<img src="img/2.jpg" >
<img src="img/3.jpg" >
<img src="img/4.jpg" >
<img src="img/5.jpg" >
<img src="img/6.jpg" >
</div>
</body>
</html>
CSS部分
div{
width: 500px;
height: 313px;
border: 1px solid #000;
margin: 400px auto;
position: relative;/*子绝父相*/
}
img{
width: 100%;
height: 100%;
position: absolute;/*给图片添加定位*/
/*top: 0;*/
/*left: 0;*/
transition: all 0.5s;/*添加动画*/
transform-origin: top;/*调整元素旋转的原点*/
}
div:hover img:nth-child(1){
transform: rotate(60deg);
}
div:hover img:nth-child(2){
transform: rotate(120deg);
}
div:hover img:nth-child(3){
transform: rotate(180deg);
}
div:hover img:nth-child(4){
transform: rotate(240deg);
}
div:hover img:nth-child(5){
transform: rotate(300deg);
}
div:hover img:nth-child(6){
transform: rotate(360deg);
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
