직각 사다리꼴에 대한 css3 matrix3d ​​변환

Question

사각형을 사다리꼴로 변형 할 수있는 matrix3d가 있습니까? 평범한 2 차원 행렬 변환은 단지 평행 사변형으로 끝날 수 있습니다. 왜곡과 회전 만 효과적으로 할 수 있기 때문입니다.

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