为了进一步练习transform,看网上一个视频,用的他的图片,然后做出来了这个图片展示墙,开心。效果如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<h1>图片展示墙</h1>
<div class="container">
<img class="pic1 pic" src="images/mm1.jpg" alt="" />
<img class="pic2 pic" src="images/mm2.jpg" alt="" />
<img class="pic3 pic" src="images/mm3.jpg" alt="" />
<img class="pic4 pic" src="images/mm4.jpg" alt="" />
<img class="pic5 pic" src="images/mm5.jpg" alt="" />
<img class="pic6 pic" src="images/mm6.jpg" alt="" />
<img class="pic7 pic" src="images/mm7.jpg" alt="" />
<img class="pic8 pic" src="images/mm8.jpg" alt="" />
</div>
</body>
</html>
下面是css.
body{
background: #ccc;
}
h1{
text-align: center;
}
.container{
width: 960px;
height: 500px;
margin: auto;
position: relative;
}
.pic{
border: 1px solid #fff;
padding: 5px 5px 15px;
background: white;
transition:all 1s ease-in-out;
}
.pic:hover{
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
box-shadow: 10px 10px 5px rgba(0,0,0,0.3);
z-index: 2;
}
.pic1{
position: absolute;
left:40px;
top:40px;
transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-o-transform:rotate(20deg);
}
.pic2{
position: absolute;
left:160px;
top:170px;
transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
}
后面的几个pic相同,只是旋转的角度不同,和定位不同。
几点收获:
1.更加明白z-index的用法,当hover上去的时候,对应的z-index:2;可以让隐藏在下面的元素到最上面。
2.关于transform:rotate和scale的用法。scale是缩放比例。
3.关于动画,transition.因为这里用了hover,即有事件触发,用transition,否则用animation.
4.关于相对定位,绝对定位,注意z-index必须要设置定位。