旋转偏斜元素以使镜像效果不起作用

Question

我试图在下图中创建倾斜元素的一般形状。无论我做什么，我都无法得到同样的扭曲效果。

有人看到我做错了吗？

#twrap {
	height: 50vh;
	width: 100%;
}
.leftSide, .rightSide {
	display: inline-block;
	vertical-align: top;
	width: 50%;
	height: 100%;
}
.leftSide {
	background: black;
	position: relative;
}
#slant:before {
	height: 100%;
	width: 30%;
    content: '';
    display: block;
    background: inherit;
	background: green;
    position: absolute;
    top: -6px;
    right: 0;
    bottom: 0;
	top: 0;
    z-index: 1;
    -webkit-transform: skewY(60deg) rotate(360deg) scaleX(-1);
    -moz-transform: skewY(60deg) rotate(360deg) scaleX(-1);
    -ms-transform: skewY(60deg) rotate(360deg) scaleX(-1);
    -o-transform: skewY(60deg) rotate(360deg) scaleX(-1);
    transform: skewY(60deg) rotate(360deg) scaleX(-1);
    -webkit-transform-origin: 100%;
    -moz-transform-origin: 100%;
    -ms-transform-origin: 100%;
    -o-transform-origin: 100%;
    transform-origin: 100%;
}
.rightSide {
	background: purple;
}

<div id="twrap">
	<div class="leftSide">
		<div id="slant"></div>
	</div><div class="rightSide">
	</div>
</div>

Answer 1

歪斜应该是-60 ......

#twrap {
	height: 50vh;
	width: 100%;
    overflow:hidden;
}
.leftSide, .rightSide {
	display: inline-block;
	vertical-align: top;
	width: 50%;
	height: 100%;
}
.leftSide {
	background: black;
	position: relative;
}
#slant:before {
	height: 100%;
	width: 50%;
    content: '';
    display: block;
    background: inherit;
	background: purple;
    position: absolute;
    top: -6px;
    right:0;
    bottom: 10px;
	top: 0;
    z-index: 1;
    -webkit-transform: skewY(-60deg) rotate(180deg) scaleX(-1) scaleY(1);
    -moz-transform: skewY(-60deg) rotate(180deg) scaleX(-1) scaleY(1);
    -ms-transform: skewY(-60deg) rotate(180deg) scaleX(-1) scaleY(1);
    -o-transform: skewY(-60deg) rotate(180deg) scaleX(-1) scaleY(1);
    transform: skewY(-60deg) rotate(180deg) scaleX(-1) scaleY(1);
    -webkit-transform-origin: 100%;
    -moz-transform-origin: 100%;
    -ms-transform-origin: 100%;
    -o-transform-origin: 100%;
    transform-origin: 100%;
}
.rightSide {
	background: purple;
}

<div id="twrap">
	<div class="leftSide">
		<div id="slant"></div>
	</div><div class="rightSide">
	</div>
</div>