<!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>
Weitere Artikel zum Drehen von CSS3-Bildern finden Sie auf der chinesischen PHP-Website!