【CSS3】实例解析1：照片墙效果（旋转放大）
【链接地址】http://www.html5sum.com/wp-content/uploads/2012/09/zhaopianqiang.html
【CSS3手册】http://www.phpstudy.net/css3/
【效果介绍】这又是一款比较简单的css3照片墙效果，只要在点击的时侯，放大并且旋转转正就好。利用的a标签的几个属性。这里值得一提的是a标签里有几个属性‘tabindex=”1″’，在这里这个用来获取焦点的顺序。此照片墙演示是对所有的浏览器，但有些人会看到它的所有功能，而其他人则只是看到基本的图片墙。浏览器：Safari and Chrome，Firefox ，IE8。
【相关技术】
box-shadow:none | <shadow> [ , <shadow> ]*
<shadow> = inset? && [ <length>{2,4} && <color>? ]默认值： none
none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值
<color>：设置对象的阴影的颜色。请参阅 颜色值
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影transition： [ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
复合属性。检索或设置对象变换时的过渡。（可独立设置属性值）[ transition-property ]：检索或设置对象中的参与过渡的属性
[ transition-duration ]：检索或设置对象过渡的持续时间
[ transition-timing-function ]：检索或设置对象中过渡的动画类型
[ transition-delay ]：检索或设置对象延迟过渡的时间
transform: rotate(12deg)；指定对象的2D rotation（2D旋转）
:focus 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
a:active + img E+F{ sRules }选择紧贴在E元素之后F元素。
【效果截图】
打开页面见到的第一眼效果，效果图如下
鼠标移动到第三排第二个图片上，效果图如下
鼠标点击第三排第二张图片，效果图如下
【代码解析】
<html lang="zh-cn"><head>
<meta charset="utf-8">
<title>css3照片墙-css3实例站</title>
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
.gallery {padding:0; margin:0; list-style:none; width:486px; height:558px; background:#f0f0e0; position:relative; margin:50px auto;
padding:20px; border:1px solid #ddd;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}
.gallery li {float:left; margin:15px; width:132px; height:156px; display:inline;}
/* 关闭按钮的动画效果：延时0.8s执行，效果是，以ease-in-out方式，历经0.5s，透明度变为最终值0，即恢复为最初不显示的效果 */
.gallery img.close {
display:block;
position:absolute;
left:-9999px;
top:64px;
z-index:500;
opacity:0;
z-index:-1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
-webkit-transition-delay: 0.8s;
-moz-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.gallery li.close {margin:0; width:28px; height:28px; position:absolute; left:493px; top:5px;}
/* 图片即a的动画效果：鼠标离开图片之后，图片出现动画效果，以ease-in-out方式，历经8s，所有属性值变为此处设置的值 */
.gallery li a {
display:block;
float:left;
width:112px;
height:126px;
padding:9px 9px 9px 9px;
margin:0;
background:#fff;
border:1px solid #e0e0e0;
text-decoration:none;
color:#000;
position:absolute;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
/* 图片向左旋转12°，顺时针方向为正，所以此处设置为-12deg */
.gallery li a.left {
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
/* 图片向右旋转12°，顺时针方向为正，所以此处设置为12deg */
.gallery li a.right {
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
/* 图片下方文字动画效果 */
.gallery li a span {
display:block;
text-align:center;
text-decoration:none;
font:normal 5px/20px arial, sans-serif; color:#fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
font-size: 0;
}
.gallery li a.p1 {top:25px; left:35px;}
.gallery li a.p2 {top:25px; left:205px;}
.gallery li a.p3 {top:25px; left:357px;}
.gallery li a.p4 {top:215px; left:35px;}
.gallery li a.p5 {top:215px; left:205px;}
.gallery li a.p6 {top:215px; left:357px;}
.gallery li a.p7 {top:405px; left:35px;}
.gallery li a.p8 {top:405px; left:205px;}
.gallery li a.p9 {top:405px; left:357px;}
/* 图片大小必须设置为相对大小，这样当a的大小发生变化之后，图片会随之自动变大 */
.gallery li a img {display:block; width:100%; height:100%; border:0;}
/* 鼠标移动到图片上之后，属性值发生变化，包括增加shadow属性值 */
.gallery li a:hover {
margin:-5px -4px ;
width:120px;
height:135px;
text-decoration:none;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}
/* 图片被点击以及获得焦点时动画效果和属性值变化，动画效果为，所有属性在0.4s内以ease-in-out形式变为所指定值，其中旋转角度迅速变为0 */
.gallery li a:active,
.gallery li a:focus {
margin:0;
position:absolute;
left:263px;
margin-left:-185px;
top:300px;
margin-top:-215px;
width:320px;
height:360px;
padding:25px 25px 50px 25px;
opacity:1;
z-index:100;
outline:0;
-webkit-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
-o-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/* 图片a被点击以及获得焦点之后，紧随其后的图片，即close按钮，属性值发生下述变化 */
.gallery li a:active + img {left:428px; opacity:1; z-index:500; cursor:pointer;}
.gallery li a:focus + img {left:428px; opacity:1; z-index:500; cursor:pointer;}
/* 图片a被点击以及获得焦点之后，紧随其后的span，即图片下方文字，属性值发生下述变化 */
.gallery li a:active span,
.gallery li a:focus span {color:#000; font-size:18px; padding-top:10px;}
</style>
</head>
<body>
<ul class="gallery">
<li>
<a class="p1 left" href="#url" tabindex="1">
<img src="img/test1.jpg" alt="html5集中营">
<span>nodejs 走起来</span>
</a>
<img class="close" src="img/test1.jpg" alt="html5集中营" title="close this image">
</li>
<li>
<a class="p2 left" href="#url" tabindex="2">
<img src="img/test2.jpg" alt="html5集中营">
<span>nodejs 走起来</span>
</a>
<img class="close" src="img/close.png" alt="html5集中营" title="close this image">
</li>
<li>
<a class="p3 left" href="#url" tabindex="3">
<img src="img/test3.jpg" alt="html5集中营">
<span>nodejs 走起来</span>
</a>
<img class="close" src="img/close.png" alt="html5集中营" title="close this image">
</li>
<li>
<a class="p4 right" href="#url" tabindex="4">
<img src="img/test4.jpg" alt="html5集中营">
<span>nodejs 走起来</span>
</a>
<img class="close" src="img/close.png" alt="html5集中营" title="close this image">
</li>
<li>
<a class="p5 right" href="#url" tabindex="5">
<img src="img/test2.jpg" alt="html5集中营">
<span>nodejs 走起来</span>
</a>
<img class="close" src="img/close.png" alt="html5集中营" title="close this image">
</li>
<li>
<a class="p6 right" href="#url" tabindex="6">
<img src="img/test4.jpg" alt="html5集中营">
<span>nodejs 走起来</span>
</a>
<img class="close" src="img/close.png" alt="html5集中营" title="close this image">
</li>
<li>
<a class="p7 left" href="#url" tabindex="7">
<img src="img/test3.jpg" alt="html5集中营">
<span>nodejs 走起来</span>
</a>
<img class="close" src="img/close.png" alt="html5集中营" title="close this image">
</li>
<li>
<a class="p8 left" href="#url" tabindex="8">
<img src="img/test2.jpg" alt="html5集中营">
<span>nodejs 走起来</span>
</a>
<img class="close" src="img/close.png" alt="html5集中营" title="close this image">
</li>
<li>
<a class="p9 left" href="#url" tabindex="9">
<img src="img/test1.jpg" alt="html5集中营">
<span>nodejs 走起来</span>
</a>
<img class="close" src="img/close.png" alt="html5集中营" title="close this image">
</li>
<li class="close"></li>
</ul>
</body></html>