CSS3 -moz-transform-origin无法按预期工作

Question

我尝试使用css3和transform：skewY（）创建垂直角度效果。问题是当我使用-moz-transform-origin从屏幕的左下角开始时，firefox不能像其他实现那样工作。效果在chrome，safari和edge中按预期工作。可以看到问题here。

代码I使用如下。

＆＃13;

＆＃13;

.skew-heading {
    height: 100vh;
    background: #0A996F;
    position: relative;
    z-index: 1;
}

    .skew-heading:after {
        content: '';
        height: 400px;
        width: 100%;
        display: block;
        position: relative;
        left: 0;
        top: 0px;
        background: white;
        z-index: -1;
    }

.skew-heading-2:after {
    -webkit-transform: skewY(-9deg);
    -moz-transform: skewY(-9deg);
    -ms-transform: skewY(-9deg);
    -o-transform: skewY(-9deg);
    transform: skewY(-9deg);

    -webkit-transform-origin:0 0;
    -moz-transform-origin: top;
    -ms-transform-origin: top;
    -o-transform-origin: top;
    transform-origin: top;
}

＆＃13;

＆＃13;

＆＃13;