@import url('elements.less'); @import url('typography.less'); .origin(@x, @y) { transform-origin: @x @y; -ms-transform-origin: @x @y; /* IE 9 */ -webkit-transform-origin: @x @y; /* Safari and Chrome */ } .rotate(@ang: 7deg, @scale: 1){ transform:rotate(@ang) scale(@scale); -ms-transform:rotate(@ang) scale(@scale); /* IE 9 */ -webkit-transform:rotate(@ang) scale(@scale); /* Safari and Chrome */ } @keyframes hangPics { 0% {.rotate(53deg, 2);} 20% {.rotate(43deg);} 40% {.rotate(48deg);} 60% {.rotate(42deg);} 80% {.rotate(45deg);} 100% {.rotate(43deg);} } @-webkit-keyframes hangPics /* Safari and Chrome */ { 0% {.rotate(53deg, 2);} 20% {.rotate(43deg);} 40% {.rotate(48deg);} 60% {.rotate(42deg);} 80% {.rotate(45deg);} 100% {.rotate(43deg);} } body { overflow: hidden; } @polaroidcolor: #eec; #pictures { float: left; width: 100%; max-width: 100%; white-space: nowrap; position: relative; .polaroid { float: left; border-width: 10px 10px 36px 10px; border-color: @polaroidcolor; border-style: solid; box-shadow: 0 6px 12px rgba(0,0,0,0.7); overflow: hidden; background: @polaroidcolor; .rotate(45, 1); .origin(0%,0%); display:block; position: absolute; z-index: 1; &.hang { .rotate(43deg); animation: hangPics 1s; -webkit-animation: hangPics 1s; /* Safari and Chrome */ } .img { display: block; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,1); border: 1px solid #999; } } }