How can I style elements in the perspective to appear straight(3d) instead of flat due to perspective? I want to achieve a design where the alphabets and flag post image align perfectly.
https://i.sstatic.net/HcHMC.jpg
.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>