用css3制作照片墙

用css3制作简单的照片墙，网站产品展示页面。实现的效果为页面垂直居中，鼠标移上图片旋转为0度并放大1.1倍

工具/原料

sublime text3

html5+css3

方法/步骤

html代码部分

css部分

最终效果

1.垂直居中 position: absolute; /*绝对定位*/ top: 50%; left: 50%; transform:translate(-50%,-50%);/*移动 */

2.图片旋转transform: rotate(5deg);

3.当鼠标移上去的时候，图片旋转并放大.pic img:hover{ transform:rotate(0deg); transform: scale(1.1);}

4.边框阴影 border:10px solid #fff; box-shadow: 0px 4px 3px #ccc;END

欧尼酱