css3 rotate image

來源:互聯網
上載者:User

代碼塊

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>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.