用於直角梯形的css3矩陣3d變換

Question

是否有矩陣3d可以將矩形變換爲如此的梯形？我知道規則的2d矩陣變換隻能以平行四邊形結束，因爲只能有效地扭曲和旋轉。

div { 
    width: 300px; 
    height: 500px; 
    border: 5px solid blue; 
    background-color: green; 
    transform: matrix3d(...?...); 
    transform-origin: 0% 0%; 
} 

Answer 1

這一個：

div { 
    width: 300px; 
    height: 500px; 
    border: 5px solid blue; 
    background-color: green; 
    -webkit-transform-origin: 0% 0%; 
    -webkit-transform: matrix3d(0.7071067811865476, 0, -0.7071067811865475, 0.0017677669529663686, 0, 1, 0, 0, 0.7071067811865475, 0, 0.7071067811865476, -0.001767766952966369, 0, 0, 0, 1); 
    transform-origin: 0% 0%; 
    transform: matrix3d(0.7071067811865476, 0, -0.7071067811865475, 0.0017677669529663686, 0, 1, 0, 0, 0.7071067811865475, 0, 0.7071067811865476, -0.001767766952966369, 0, 0, 0, 1); 
} 

demo