JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

CSS

ul {
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(600px) rotateY(60deg);
    position: absolute;
    left: 100px;
    top: 100px;
}

li {
  display: block;
    height: 40px;        
}

.item {
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 50% 0;
    -webkit-transform: perspective(600px) rotateX(40deg);
    
    border-top: 1px solid blue;
    background: red;
    display: block;
    height: 40px;
    width: 200px;
}

JavaScript

$kids = $('li');
var $parent = $('ul');
$kids.each(function( index, el ){
    var $el = $(el);
    var $container = $('<span class="item"/>');
    $container.append( $el );
    $parent.append( $container );
    $parent = $container;
});