Элемент стиля в перспективе

Question

Я бы хотел, чтобы элементы в perspective были прямыми (3d), в настоящее время они плоские из-за перспективы. Я пытаюсь достичь такого дизайна. Посмотрите, как располагаются алфавиты и изображения флагов.

.container {
    perspective: 100px;
    perspective-origin: bottom;
    width: 63%;
    margin: auto;
}
.percpective {
	height: 500px;
	background-color:#9DDAE4;
	perspective: 100px;
	transform: rotateX(7deg);
}
table {
    width: 100%;
    border-collapse: collapse;
}

table td {
    text-align: center;
    border: 1px solid #fff;
    color: #fff;
    padding: 35px;
    font-size: 25px;
}

<div class="container">
	<div class="percpective">
    	<table>
        	<tr>
        		<td>1</td>
        		<td>2</td>
        		<td>3</td>
        		<td>4</td>
        		<td>5</td>
        	</tr>
        	<tr>
        		<td>1</td>
        		<td>2</td>
        		<td>3</td>
        		<td>4</td>
        		<td>5</td>
        	</tr>
        	<tr>
        		<td>1</td>
        		<td>2</td>
        		<td>3</td>
        		<td>4</td>
        		<td>5</td>
        	</tr>
        	<tr>
        		<td>1</td>
        		<td>2</td>
        		<td>3</td>
        		<td>4</td>
        		<td>5</td>
        	</tr>
        	<tr>
        		<td>1</td>
        		<td>2</td>
        		<td>3</td>
        		<td>4</td>
        		<td>5</td>
        	</tr>				
        </table>
    </div>
</div>