Рамки для картинок

HTML:

<div class="stack rotated-left">
    <img src="http://inspectelement.com/demos/css3/stacks/image4.jpg">
</div>

<div class="stack twisted">	
    <img src="http://inspectelement.com/demos/css3/stacks/image3.jpg">
</div>
    
<div class="stack rotated">	
    <img src="http://inspectelement.com/demos/css3/stacks/image2.jpg">
</div>

CSS:

.stack {
  width: 200px; /* размер картинки */
  float: left;
  margin: 0 4% 4% 0;
  position: relative;
  z-index: 10;
}

.stack img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border: 10px solid #fff;
  border-radius: 3px;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.stack:before, .stack:after {
  content: "";
  border-radius: 3px;
  width: 100%;
  height: 100%;
  position: absolute;
  border: 10px solid #fff;
  left: 0;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: 0.3s all ease-out;
}

.stack:before {top: 4px; z-index:-10;}
.stack:after  {top: 8px; z-index: -20;}

.stack.twisted:before {transform: rotate(4deg);}
.stack.twisted:after  {transform: rotate(-4deg);}

.stack.rotated:before {transform-origin: bottom left; transform: rotate(2deg);}
.stack.rotated:after  {transform-origin: bottom left; transform: rotate(4deg);}

.stack.rotated-left:before {transform-origin: bottom left; transform: rotate(-3deg);}
.stack.rotated-left:after  {transform-origin: bottom left; transform: rotate(-6deg);}

Пример кода:

Источник: CSS3 Stacks