Edit in JSFiddle

body {
	width: 100%;
	height: 100%;
	padding-bottom: 160px;
  font-family: 'Dancing Script', cursive;
  background-image: linear-gradient(45deg, #F7CAC9 15%, #91A8D0 85%);
}

.h1 {
  margin: 1em;
  color: rgba(white, .85);
}

.wrap {
  width: 100%;
  height: 100%;
  
}

.inner {
  display: block;
	width: min-content;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 3em;
	transform-style: preserve-3d;
  perspective: 1400px;
		
	> img {
		transform-origin: center center 0px;
		animation: spin infinite 10s cubic-bezier(0.445,0.050,0.550,0.950);
	}
	
	> figcaption {
		font-size: 20px;
	}
}

@keyframes spin {
	0%, 20% {
		transform: rotateY(0);
	}
	80%, 100% {
		transform: rotateY(360deg);
	}
}

<h1 class="h1 font-weight-bold text-xs-center text-capitalize">
auto width cats caption
</h1>

<div class="wrap">
  <figure class="inner">
    <img src="http://placekitten.com/300/300" alt="">
		<figcaption>
			This cat is very very cute. This cat is very very cute. This cat is very very cute. This cat is very very cute. This cat is very very cute. This cat is very very cute.
		</figcaption>
  </figure>
	<figure class="inner">
    <img src="http://placekitten.com/500/200" alt="">
		<figcaption>
			This cat is very very cute. This cat is very very cute. This cat is very very cute. This cat is very very cute. This cat is very very cute. This cat is very very cute.
		</figcaption>
  </figure>
	<figure class="inner">
    <img src="http://placekitten.com/360/300" alt="">
		<figcaption>
			This cat is very very cute. This cat is very very cute. This cat is very very cute. This cat is very very cute. This cat is very very cute. This cat is very very cute.
		</figcaption>
  </figure>
	<figure class="inner">
    <img src="http://placekitten.com/400/300" alt="">
		<figcaption>
			This cat is very very cute. This cat is very very cute. This cat is very very cute. This cat is very very cute. This cat is very very cute. This cat is very very cute.
		</figcaption>
  </figure>
</div>