透视图中的样式元素

Question

我想将perspective中的元素的样式设置为straight（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>

Answer 1

正如Temani所言，transform: rotateX(-7deg);的相反方向将解决此问题。

table td {
    text-align: center;
    border: 1px solid #fff;
    color: #fff;
    padding: 35px;
    font-size: 25px;
    transform: rotateX(-7deg);
}