操作方法
html代码部分
<body> <div class="pic"> <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <img src="img/4.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <img src="img/4.jpg"> <img src="img/1.jpg"> </div> </body>
css部分
<style type="text/css"> .pic{ background:#ffc; margin:0 auto; width: 980px; height: 700px; position: absolute; /*绝对定位*/ top: 50%; left: 50%; transform:translate(-50%,-50%);/*移动 */ } .pic img{ width:160px; height: 260px; margin:20px; border:10px solid #fff; box-shadow: 0px 4px 3px #ccc; } .pic img:nth-of-type(1), .pic img:nth-of-type(5){ transform: rotate(5deg); } .pic img:nth-of-type(2), .pic img:nth-of-type(6){ transform:rotate(-3deg); } .pic img:nth-of-type(3), .pic img:nth-of-type(8){ transform:rotate(2deg); } .pic img:nth-of-type(4), .pic img:nth-of-type(7){ transform:rotate(-7deg); } .pic img:hover{ transform:rotate(0deg); transform: scale(1.1); } </style>
最终效果
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;