<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .out{ width: 200px; height: 300px; -webkit-perspective:800px; margin: 0 auto; } .box{ width: 100%; height: 100%; -webkit-transform-style: preserve-3d; } img{ transition: -webkit-transform 2s ease 1s,width 1s ease 2s; -webkit-box-reflect:below 5px -webkit-gradient(linear,50% 0,50% 100%, color-stop(0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,0.1)), color-stop(0.8,rgba(0,0,0,0.4)),color-stop(1,rgba(0,0,0,0.8)) ); /*above： 指定倒影在对象的上边 below： 指定倒影在对象的下边 left： 指定倒影在对象的左边 right： 指定倒影在对象的右边 5px 定义阴影和图片的距离 */ } img:hover{ -webkit-transform:rotate3d(1,1,1,45deg); width: 300px; } </style> </head> <body> <div class="out"> <div class="box"> <img src="1.jpg" width="200px" height="200px"> </div> </div> </body> </html>