transform-style: preserve-3d;の必要性

前提・実現したいこと

ホバーすると上から蓋をするように擬似要素が覆いかぶさってくるボタンを作りました。
奥行きのあるアニメーションを作るためには「transform-style: preserve-3d;」「perspective: 〜px;」の2つは最低限必要だと聞きましたが、「transfrom-style: preserve-3d;」がなくても同じような動きをしているように見えます。このプロパティがないとどのような問題が発生するのでしょうか。

該当のソースコード

HTML
1 <button class="btn curtain"><span>Button</span></button>

SCSS
1//reset
2button {
3    background-color: transparent;
4    border: none;
5    cursor: pointer;
6    outline: none;
7    appearance: none;
8}
9
10.btn {
11    padding: 15px 60px;
12    border: 2px solid #000;
13    font-size: 20px;
14    transition: all .3s;
15    font-weight: bold;
16    position: relative;
17    // transform-style: preserve-3d;
18    perspective: 300px;
19    & span {
20        transform: translateZ(20px);
21        display: inline-block;
22    }
23    &::before {
24        content: '';
25        width: 100%;
26        height: 100%;
27        background-color: #000;
28        position: absolute;
29        top: 0;
30        left: 0;
31        transform: rotateX(90deg);
32        transform-origin: top center;
33        transition: all .5s;
34        opacity: 0;
35    }
36
37    &:hover {
38        color: #fff;
39        &::before {
40            transform: none;
41            opacity: 1;
42        }
43    }
44
45}