CSS3----旋轉圖片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旋轉圖片</title> <style> *{ margin: 0; } .wrap{ width: 600px; height: 400px; border: 1px solid black; padding: 10px 15px; box-sizing: border-box; } .wrap .item{ width: 120px; height: 120px; border: 1px solid #ddd; background: url(img/1.jpg) no-repeat; background-size:100% 100%; position: relative; overflow: hidden; float: left; } .wrap .item .info{ position: absolute; width: 100%; height: 120px; background:rgba(0,0,0,0.5); color: #fff; /*bottom: -40px;*/ left: 0; transition: 0.75s all; -webkit-transform:rotate(60deg) translate(94px,52px); } .wrap .item:hover .info{ /*bottom: 0;*/ -webkit-transform:rotate(360deg) translate(0px,0px); } </style> </head> <body> <div class="wrap"> <div class="item"> <span class="info">鬥破蒼穹</span> </div> <div class="item"> <span class="info">鬥破蒼穹</span> </div> <div class="item"> <span class="info">鬥破蒼穹</span> </div> <div class="item"> <span class="info">鬥破蒼穹</span> </div> <div class="item"> <span class="info">鬥破蒼穹</span> </div> <div class="item"> <span class="info">鬥破蒼穹</span> </div> <div class="item"> <span class="info">鬥破蒼穹</span> </div> </div> </body> </html>
效果圖：
