HTML5和CSS3已经被谈论很久了，关于W3C等既得利益体的争论这里按下不表，下面通过简单的CSS3代码来实现一个酷炫的照片墙效果，可以用于制作家庭的生活照相册，也可以在追女孩子时适时小秀一把:)
整个代码中用到的主要有CSS3中的transform中的旋转(rotate),过渡(transition),阴影(box-shadow),同时通过position来进行位置的定位，z-index来控制显示的层次。
相关示例代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | img{ padding:10px 10px 15px; background:#fff; border:1px solid #ddd; position:absolute; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; z-index:0; top:50px; left:100px; -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); transform:rotate(20deg);}img:hover{ -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg); box-shadow:5px 5px 10px #ccc; z-index:1; -webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2);} |
