1.用CSS制作照片墙需要用到两个重要属性:transform和transition。
transform属性允许旋转(rotate)、伸缩(scale)、倾斜(skew)或者移 动(translate)元素。
transition(“过渡”)使属性值在指定时间内平滑地完成变化。可以配置4个属性:transition-property,指定过渡效果所应用的属性;transition-duration,指定完成变化的时间;transition-timing-function,描述属性值的变化速度,常用值包括ease(默认,逐渐变慢),linear(匀速变化),ease-in(加速变化),ease-out(减速变化),ease-in-out(加速然后减速)。
2.还要用到一个重要属性是z-index,该属性配置元素堆叠顺序,属性值为数字,数值越大显示得越在上。
用一个div作为父容器来包含所有图片,将position设为relative;注意要为每张图片分配一个class(必须用class才能实现图片伸缩),为每张图片配置position为absolute。还需要注意不同浏览器的内核支持问题。
3.代码示例如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>照片墙</title>
<style>
body{
background: #eee;}
.container{
width:960px;
height:450px;
margin: 60px auto;
position:relative;}
img{
width:240px;
height:180px;
padding: 10px 10px 15px 10px;
border: 1px solid #ddd;
position:absolute;
transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
z-index:1;}
img:hover{
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:scale(1.5);
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
box-shadow:4px 4px 10px #ccc;
-moz-box-shadow:4px 4px 10px #ccc;
-webkit-box-shadow:4px 4px 10px #ccc;
z-index:2;}
.img1{
top:50px;
left:20px;
transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);}
.img2{
top:50px;
left:100px;
transform:rotate(10deg);
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);}
.img3{
top:50px;
left:200px;
transform:rotate(30deg);
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);}
</style>
</head>
<body>
<div class="container">
<img class="img1" src="m1.jpg"/>
<img class="img2" src="m1.jpg"/>
<img class="img3" src="m1.jpg"/>
</div>
</body>
</html>