直角梯形的css3矩阵3d变换

Question

是否有一个matrix3d可以将矩形转换为这样的梯形？我知道常规的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