"

From 2014.igem.org

.image-frame{

 position:relative;
 z-index:1;
 display:inline-block;

} .image-frame img{

 padding: 4px;
 background-color: #fff;
 border: 1px solid #ccc;
 border: 1px solid rgba(0, 0, 0, 0.2);
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

} .image-frame:before, .image-frame::after{

 -webkit-box-shadow: 0 0 7px 4px rgba(104, 104, 104, 0.5);

box-shadow: 0 0 7px 4px rgba(104, 104, 104, 0.5); content: " "; display: table; width: 49%; height: 0; position: absolute; bottom: 6px; z-index: -2; } .bx-wrapper .bx-viewport { -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; border: solid #fff 5px; left: -5px; background: #fff; }

.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; } .image-frame:before { left: 4px; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .image-frame:after { right: 4px; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); } element.style { } .flipper--horizontal .flip__face--back { transform: rotateY(180deg); padding: 20px; background: green; } .flipper--horizontal .flip__face { width: 200px; height: 200px; backface-visibility: hidden; position: absolute; top: 0; left: 0; }

• {

box-sizing: border-box; } user agent stylesheetdiv { display: block; }