* { margin:0; padding:0; font-family:"Arial"; } body { background:#222222 } #main { width:962px; height:473px; margin:10px auto; } #main ul { list-style:none; } #main ul li { width:320px; height:470px; float:left; position:relative; } #main ul li img { border:10px solid #F5F5F5; -webkit-transition:1s ease; -moz-transition:1s ease; } #main .info { width:240px; height:230px; border:10px solid #F5F5F5; background:#deddcd; position:absolute; bottom:-50px; right:0; -webkit-transition:1s ease; -moz-transition:1s ease; -moz-transform:rotatey(30deg); -webkit-transform:rotatey(30deg); } #main .info h2 { text-align:center; line-height:70px; color:#7a3f3a; font-weight:normal; font-size:20px; } #main .info p { padding:0 20px; font-size:14px; } #main .info a { display:block; width:100px; height:30px; background:#7a3f3a; color:#FFF; border-radius:5px; text-decoration:none; text-align:center; line-height:30px; margin:10px auto; } #main ul li:hover .info { -webkit-transform:rotatey(0deg); -moz-transform:rotatey(0deg); right:30px; bottom:-70px; } #main ul li:hover img { -webkit-transform:rotatey(360deg); -moz-transform:rotatey(360deg); }
图片旋转更能,值得收藏。