源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.ctn {margin: 100px; perspective: 300px; transform-style: preserve-3d; border: 1px solid red; font-size: 0; position: relative;}
.ctn div {left: 100px; width: 50px; height: 80px; display: inline-block; position: absolute;}
.ctn .ctx1 {background: yellow; transform: rotateX(45deg);}
.ctn .ctx2 {background: green; transform: rotateX(80deg);}
</style>
</head>
<body>
<div class="ctn">
<div class="ctx1"></div>
<div class="ctx2"></div>
</div>
</body>
</html>
我想要的效果：
解释：
一定要交叉起来，这样更有空间感，但是只有chrome浏览器支持，ff和ie都不行，求帮助，我试过了-moz-,-ms-,-webkit-各种前缀都不行，请亲试过后来给小弟指点方向，谢啦！！
