Untitled

dabblet.css

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #FFF;
}

.old {
  animation: spin 3s infinite ease-in-out;
  transform-origin: 0 50%;
}

.new {
  animation: spin-new 3s infinite ease-in-out;
  transform-origin: 100% 50%;
}

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

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


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

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

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

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

dabblet.html

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

settings.json

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