JSFiddle - React, Tailwind, and code Playground

HTML

<div class='contain 'id='container'>
    <div class='line' id='lineout'>
        <div class='square' id='1id'></div>
        <div class='square' id='2id'></div>
        <div class='square' id='3id'></div>
        <div class='square' id='4id'></div>
        <div class='square' id='5id'></div>
        <div class='square' id='6id'></div>
        <div class='square' id='7id'></div>
        <div class='square' id='8id'></div>
        <div class='square' id='9id'></div>
        <div class='square' id='10id'></div>
        <div class='square' id='11id'></div>
    </div>
</div>

CSS

#container {
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;   
      -webkit-perspective:1000;
      -webkit-perspective-origin:50% 50%;          
}
.square{
      float:left;         
      width: 150px;
      height: 150px;
      background: orange;    
}

JavaScript

function dispatch(){
    var sizeOfImg = 150;
    var windowWith = document.body.offsetWidth;
    var widthRest = windowWith%sizeOfImg;
    var nbSquareRow = Math.floor(windowWith/sizeOfImg);
    dlt(nbSquareRow);
    var marginVal = widthRest/(nbSquareRow+1);
    var lineout = document.getElementById('lineout');
    lineout.style.paddingLeft = marginVal+'px';
    lineout.style.paddingTop = marginVal+'px';
    var square = document.getElementsByTagName('div');
    for(var i=0, length = square.length;i<length; i++){
        if(square[i].className === 'square'){
            square[i].style.marginRight = marginVal+'px'; 
            square[i].style.marginBottom = marginVal+'px';        
        }       
    }
}

dispatch();
window.onresize = function(e){dispatch();};

function dlt(nbSquareRow){
    var maxRotatDeg = 40;
    var isEven=true;
    if(nbSquareRow%2 == 0){
        var unityRotatDeg = maxRotatDeg/(nbSquareRow/2);
    }else{
        var unityRotatDeg = maxRotatDeg/((nbSquareRow-1)/2);
        isEven = false;
    }
    var middle = Math.floor(nbSquareRow/2);
    var mySquares = document.getElementsByTagName('div');
    for(var j=0, sqleng = mySquares.length;j<sqleng; j++){
        if(mySquares[j].className == 'square'){
            var colNumb = (parseInt(mySquares[j].id)-1)%nbSquareRow;
            var myMultiplier = (middle-colNumb);
            if(isEven && myMultiplier<=0){
                myMultiplier--;
            }
            mySquares[j].style.webkitTransform = 'rotateY('+(unityRotatDeg*myMultiplier)+'deg)';
        }
    }
}