JSFiddle - React, Tailwind, and code Playground

HTML

<aside class="rotateX">
			<h2>rotateX</h2>
			<p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
      <p>CSS: <code>transform:rotateX (60deg);</code> </p>
</aside>

CSS

aside {
	height: 600px;
	float: left;
	margin: 20px 20px 0 0;
	padding: 10px;
	width: 260px;
	-webkit-transition: all 2s;
	/* für Safari 5.1, Android 2.3 bis 4.3 */
	
	transition: all 2s;
}

aside.rotateX {
	background: skyblue;
}
aside:hover {
	-webkit-transform: rotateX(60deg);
	/* Chrome, Safari, Opera */
	
	-ms-transform: rotateX(60deg);
	/* IE 9 */
	
	transform: rotateX(60deg);
}