css3 图片 悬停效果
纯css实现
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> * { padding:0px; margin:0 } ul { -webkit-perspective:1200; /*定义perspective 子级元素才会有3D效果*/width:800px; margin:0 auto; } li { width: 225px; height: 210px; display:block; list-style:none; padding:0px; margin:0; } div { width:225px; height:210px; margin:0 auto; position:absolute; top:1px; background:url(Images/tout-shadow1.png) no-repeat; /*背景*/ -webkit-transform-origin:0 0; -webkit-transform:scaleY(0.95); /*放大缩小*/ -webkit-transition:-webkit-transform .4s ease; } img { width:225px; height:210px; position:absolute; top:0px; display:block; -webkit-transform-origin-x:0px; -webkit-transform-origin-y:0px; -webkit-transform-origin-z:0px; -webkit-transition:-webkit-transform .3s ease; -webkit-transform-style:preserve-3d; } li:hover { -webkit-background-size:225px 220px; } li:hover img { -webkit-transform:rotateX(10deg); } li:hover div { -webkit-transform:scaleY(1.02); } </style> </head> <body> <ul> <li> <div></div> <img src="Images/tout-secrets.png" /></li> </ul> </body> </html>
