Black_Star,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#square {
width: 600px;
height: 600px;
border: 1px solid black;
}
#minSquare {
position: relative;
margin: 5%;
width: 500px;
height: 500px;
border: 1px solid black;
background-color: yellow;
/*overflow: hidden;*/
}
#first {
position: absolute;
height: 100%;
width: 500px;
margin-top: -2%;
z-index: 1;
}
#second {
position: absolute;
height: 100%;
width: 500px;
margin-left: 4%;
z-index: 2;
perspective: 200px;
}
.one {
float: left;
box-sizing: border-box;
width: 5%;
height: 5%;
background-color: red;
border: 1px solid black;
}
.one:hover {
/*perspective: 100px;*/
transform-origin: right;
transition: transform 0.5s;
transform: rotateY(60deg);
background-color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
$(function() {
var div = $('#minSquare');
var rowWidth = div.width();
var rowHeight = div.height();
var one = $('<div>',{'class' : 'one'}).appendTo(div);
var widthOne = one.outerWidth(true);
var heightOne = one.outerHeight(true);
var len = (rowHeight/heightOne|0) * (rowWidth/widthOne|0)-1;
for (var i=0; i<len; i++) {
div.append(one.clone())
}
})
</script>
</head>
<body>
<div id="square">
<div id="minSquare"></div>
</div>
</body>
</html>