Untitled

dabblet.css

body {
  margin: 0;
  font: 10pt arial;
}

.grey {
  width: 0px;
  margin: 0 auto;
  height: 500px;
}

.grey .img1 {
  margin-left: -250px;
}

.grey .img2 {
  margin-left: -167px;
}

.old {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  
  animation: spin 3s infinite ease-in-out;
  transform-origin: 0 50%;
  transform: perspective(1000px) translateZ(0) rotateY(  0deg);

}

.new {
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
  
  animation: spin-new 3s infinite ease-in-out;
  transform-origin: 100% 50%;
  transform: perspective(1000px) translateZ(0) rotateY(  -90deg); left: -100%;

}

@keyframes spin {
  0%   { transform: perspective(1000px) translateZ(0) rotateY(  0deg); }
  50%  { transform: perspective(1000px) translateZ(0) rotateY( 90deg); left: 100%; }
  100% { transform: perspective(1000px) translateZ(0) rotateY(  0deg); }
}

@keyframes spin-new {
  0%   { transform: perspective(1000px) translateZ(0) rotateY(  -90deg); left: -100%; }
  50%  { transform: perspective(1000px) translateZ(0) rotateY( 0deg); left: 0%; }
  100% { transform: perspective(1000px) translateZ(0) rotateY(  -90deg); left: -100%; }
}

dabblet.html

<div class="new">
	<div class="grey">
		<img src="http://fotki.adams.yandex.ru:10081/get/0/22805354.0/0_32_923e3875_L" class="img2" />
	</div>
	Какое-то описание
</div>
<div class="old">
	<div class="grey">
		<img src="http://fotki.adams.yandex.ru:10081/get/0/22805354.0/0_2d_4b75a622_L" class="img1" />
	</div>
	И тут тоже какое-то описание
</div>

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}