html页面:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>rotate image</title> </head> <body> <div class="polaroid rotate_left"> <img src="pulpitrock.jpg" alt="" width="284" height="213"> <p class="caption">the pulpit rock inlysefjorden,norway.</p> </div> <div class="polaroid rotate_right"> <img src="cinqueterre.jpg" alt="" width="284" height="213"> <p class="caption">monterosso al mare. one of the five villages in cinque terre.</p> </div> </body> </html> css样式: <style type="text/css" media="screen"> body{ margin:30px; background-color: #e9e9e9; } div.polaroid{ width: 294px; padding: 10px 10px 20px 10px; border:1px solid #bfbfbf; background-color: #f0f8ff; box-shadow: 4px 4px 6px #aaa; border-radius: 5px; } div.rotate_left{ float: left; -ms-transform:rotate(7deg); -webkit-transform:rotate(7deg); transform:rotate(7deg); } div.rotate_right{ float: left; -ms-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); transform:rotate(-10deg); } </style>
更多css3 rotate image。