CSS，转换 - 代码中的一切都正确吗？

请告诉我下面的代码写得有多正确，即有没有严重的错误？只是在浏览器中一切似乎都运行良好，但是在 Web 编辑器中使用这段代码时，最后一行的 transform 开始有点小故障。

.box {
    padding: 5px;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}
.box:before, .box:after {
    content: "";
    position: absolute;
    z-index: -1;
}
.box:after {
    bottom: 0;
    box-shadow: 0 40px 25px #777;
    height: 50px;
    left: 10%;
    width: 80%;
    transform: perspective(480px) rotateX(60deg);
}