SOURCE

<div class="polaroid rotate_left">
<img src="http://www.w3school.com.cn/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" />
<p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
</div>

<div class="polaroid rotate_right">
<img src="http://www.w3school.com.cn/i/china_pavilion.jpg" alt="世博中国馆" width="284" height="213" />
<p class="caption">2010年上海世博会，中国馆。</p>
</div>


<a
  target="_blank"
  href="http://blog.csdn.net/freshlover/article/details/7610269">详解<a/>

div.polaroid
{
  width:294px;
  padding:10px 10px 20px 10px;
  border:1px solid #BFBFBF;
  background-color:white;
  /* Add box-shadow */
  box-shadow:20px 20px 10px red;
}

div.rotate_left
{
  float:left;
  -ms-transform:rotate(7deg); /* IE 9 */
  -moz-transform:rotate(7deg); /* Firefox */
  -webkit-transform:rotate(7deg); /* Safari and Chrome */
  -o-transform:rotate(7deg); /* Opera */
  transform:rotate(7deg);
}

div.rotate_right
{
  float:left;
  -ms-transform:rotate(-8deg); /* IE 9 */
  -moz-transform:rotate(-8deg); /* Firefox */
  -webkit-transform:rotate(-8deg); /* Safari and Chrome */
  -o-transform:rotate(-8deg); /* Opera */
  transform:rotate(-8deg);
}