JSFiddle - React, Tailwind, and code Playground

HTML

<div>before</div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
</ul>
<div> after</div>

CSS

li {
   width    : 30px;
   height   : 30px;  
   float    : left;
   margin   : 1px;
   background : #ccc;
}

li:nth-child(2n+1) { clear: left; }

/* ul rotation with origin x=100%, y=0 */
ul {
   position : relative;  
   height : 64px; 
    
   float : left;
   -webkit-transform-style: preserve-3d;
   -webkit-transform-origin : 100% 0;
   -webkit-transform : rotateZ(-90deg) rotateY(180deg) translateY(-66px) translateX(66px);
}

ul + * {
  clear: left;
}

li {
   
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin : 0 50%;
    -webkit-transform :  rotateY(180deg) rotateZ(90deg) translateY(15px) translateX(-15px);    
}

JavaScript

/* 
Demo by
Fabrizio Calderan
*/