auto-width

by uto usui

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<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>

SCSS

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);
	}
}

JavaScript

WebFontConfig = {
    google: { families: [ 'Dancing+Script:400,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();