タイトルそのままです．CSSのTransformを利用して要素を3D回転させているのですが，**「見えないはずのものが見える」**というホラーな現象が起きております．

デモ：https://thimbleprojects.org/liveasnotes/511175/
（質問本文中のコードは初期のままですが，デモは最新の状態に更新されています．）

デモの更新箇所には/*modified(add)*/や，/*modified(edit)*/等を書いています
現時点での更新：

要素サイズが画面サイズに依存している（vw,vhを使っている）ことが原因ではとの御指摘から，#field,#axes,#graph1, #graph2のwidth,height等を固定値へ変更

デモは，HTML+CSSで作ったグラフもどきです．発生した問題は3つあり，おそらく似たような原因だろうと睨んでいるのですが，改善方法の検討がつかないので，こちらで質問させていただきます．

前後関係の消失①

発生が確認された環境：Chrome, Firefox

回転前は背景にめり込んでいる要素が，回転後には，めりこまずに表示されています（右上）...???

真上から見る限り，めり込んでいる方が表示としては正しいはずなのですが...

前後関係の消失②

発生が確認された環境：Chrome

赤いポールとグラフ下部の「床」が直交してるはずなのですが，ポールが前面にあるかのように描画されてしまいます

透過部分の描画が一時的に正しくなる

発生が確認された環境：Chrome

逆になぜ，意図してないほうの表示に戻ってしまうのでしょう？

コード

HTML
1<!DOCTYPE html>
2
3<html lang="ja">
4
5    <head>
6        <meta charset="utf-8">
7        <meta name="author" content="liveAsNotes">
8        <meta name="description" content="this is a demo">
9        <meta name="format-detection" content="telephone=no, address=no, email=no">
10        <meta name="viewport" content="width=device-width, initial-scale=1.0">
11        <meta http-equiv="X-UA-Compatible" content="IE=edge">
12        <title>demo</title>
13    </head>
14    <body>
15        <input type="checkbox" id="effect">
16        <h1>Graph1,2</h1>
17        <div id="field">
18            <div id="axes"></div>
19            <div id="dots"></div>
20            <div id="graph1"></div>
21            <div id="graph2"></div>
22        </div>
23        <label for="effect">rotate</label>
24    </body>
25
26</html>

CSS
1*,
2*::before,
3*::after{
4    font-weight: normal;
5    line-height: 1em;
6    padding:0;
7    margin: 0;
8    box-sizing: border-box;
9    -webkit-tap-highlight-color:rgba(0,0,0,.1);
10}
11html,body{
12    width: 100vw;
13    height: 100vh;
14    overflow-x: hidden;
15}
16html{
17    font: normal 17px / 17px sans-serif;
18    -webkit-text-size-adjust: 100%;
19}
20body{
21    position: relative;
22    padding: 3rem;
23    perspective: 3000px;
24}
25h1{
26    position: absolute;
27    z-index: 1;
28}
29#field{
30    position: absolute;
31    top: 50vh;
32    left: 50vw;
33    transform-origin: center center;
34    transform-style: preserve-3d;
35    transform: translate(-50%, -50%);
36    transition-duration: .5s;
37    width: 70vw;
38    height: 70vh;
39    background: #e7e7e7;
40}
41#axes,
42#axes::before,
43#axes::after{
44    position: absolute;
45    bottom: 1rem;
46    width: 70vw;
47    height: 1px;
48    background: #aaa;
49}
50#axes::before,
51#axes::after{
52    content: "";
53    bottom: auto;
54    width: 70vh;
55    transform-origin: 1rem center;
56}
57#axes::before{
58    transform: rotateZ(-90deg);
59}
60#dots{
61    position: absolute;
62    left: 5rem;
63    bottom: 7rem;
64    width: .5rem;
65    height: .5rem;
66    transform-origin: left top;
67    transform: translateZ(5rem) rotateY(-10deg);
68    border-radius: 100%;
69    background: tomato;
70    box-shadow:
71        0 0 0 1px #fff,
72        1rem 1rem tomato,
73        1rem 1rem 0 1px #fff,
74        2rem -.5rem tomato,
75        2rem -.5rem 0 1px #fff,
76        7rem -2rem tomato,
77        7rem -2rem 0 1px #fff,
78        11rem -1.4rem tomato,
79        11rem -1.4rem 0 1px #fff,
80        17rem -3rem tomato,
81        17rem -3rem 0 1px #fff,
82        26rem -13rem tomato,
83        26rem -13rem 0 1px #fff,
84        31rem -11rem tomato,
85        31rem -11rem 0 1px #fff,
86        37rem -18rem tomato,
87        37rem -18rem 0 1px #fff,
88        39rem -17rem tomato,
89        39rem -17rem 0 1px #fff,
90        40rem -20rem tomato,
91        40rem -20rem 0 1px #fff;
92}
93#graph1{
94    position: absolute;
95    top: 0;
96    left: 0;
97    width: 80%;
98    height: 75%;
99    transform: translateZ(10rem);
100    border: 3px solid cornflowerblue;
101    border-radius: 0 0 100%;
102    border-width: 0 0 1px 0;
103    background: rgba(200, 60, 10, .2);
104}
105#graph2{
106    position: absolute;
107    top: 20%;
108    transform-origin: left top;
109    transform: translateZ(60vh) rotateX(-0deg) rotateY(30deg);
110    width: 100%;
111    height: 45%;
112    border: 3px solid limegreen;
113    border-radius: 0 0 100%;
114    border-width: 0 0 1px 0;
115    background: rgba(10, 30, 200, .15);
116}
117#effect{
118    display: none;
119}
120#effect:checked ~#field{
121    transform: translate(-50%, -50%) rotateX(-20deg) rotateY(-30deg);
122}
123#effect:checked ~#field::before{
124    content: "";
125    display: block;
126    width: calc(100% - 2rem);
127    height: calc(100% - 2rem);
128    background: #ddd;
129    transform-origin: center calc(100% + 1rem);
130    transform: translate(2rem) rotateX(-90deg);
131}
132#effect:checked ~#field >#axes::after{
133    transform: rotateY(-90deg);
134}
135#effect:checked ~#field >#dots::before{
136    content: "";
137    position: absolute;
138    top: .1rem;
139    left: 50%;
140    z-index: -1;
141    transform: translate(-50%);
142    display: block;
143    width: .2rem;
144    height: 100vh;
145    background: tomato;
146    box-shadow:
147        0 0 0 1px #fff,
148        1rem 1rem tomato,
149        1rem 1rem 0 1px #fff,
150        2rem -.5rem tomato,
151        2rem -.5rem 0 1px #fff,
152        7rem -2rem tomato,
153        7rem -2rem 0 1px #fff,
154        11rem -1.4rem tomato,
155        11rem -1.4rem 0 1px #fff,
156        17rem -3rem tomato,
157        17rem -3rem 0 1px #fff,
158        26rem -13rem tomato,
159        26rem -13rem 0 1px #fff,
160        31rem -11rem tomato,
161        31rem -11rem 0 1px #fff,
162        37rem -18rem tomato,
163        37rem -18rem 0 1px #fff,
164        39rem -17rem tomato,
165        39rem -17rem 0 1px #fff,
166        40rem -20rem tomato,
167        40rem -20rem 0 1px #fff;
168    border-radius: .1rem;
169    opacity: .5;
170}
171#effect:checked ~#field >#graph1{
172    background: rgba(200, 60, 10, .5);
173}
174#effect:checked ~#field >#graph2{
175    background: rgba(10, 30, 200, .5);
176}
177label[for="effect"]{
178    position: absolute;
179    left: 50vw;
180    bottom: 1rem;
181    transform: translateX(-50%);
182    width: 10rem;
183    height: 3rem;
184    font-size: 1rem;
185    text-align: center;
186    border: 1px solid;
187    padding: 1rem;
188    transition-duration: .5s;
189}
190label[for="effect"]:hover{
191    background: azure;
192}

※本文中のGifは，以下のセレクタのrotateXおよびrotateYプロパティを弄っています

CSS
1#effect:checked ~#field{
2    transform: translate(-50%, -50%) rotateX(-20deg) rotateY(-30deg);
3}

もしブラウザによって見え方・挙動が異なる場合は，その旨教えていただけると参考になります（ブラウザハック的なことが必要になるかもしれないので...）

横幅に応じて，要素の前後関係が修正されるとのこと-->検証中

yoshinavi

2018/07/01 02:31

詳しくは見ていないのですが、デモをそのままでは、同じ症状ですが、googleデベロッパーツール（下側に表示させています）で見ると正常にみえます。高さが関連していそうです。

liveasnotes

2018/07/01 02:40

vw,vhを使っているところがあるので，そこが何かやらかしているのかもしれません．あと，各要素にtransform-style: preserve-3d;を片っ端からいれるとうまくいくっぽいことが分かってきたので，その辺りの仕様を確認中です．高さによって表示の具合が変わるというのも，また別の部分で関わってくるかもしれないので，調べてみます．

yoshinavi

2018/07/01 02:41

「高さ」だけでなくデバイス画面による「Graph1,2」のサイズ変更が原因では無いでしょうか？角度を変えてみると「Graph1,2」の交差が無くなるのが分かるかと思います。

liveasnotes

2018/07/01 02:51

なるほど言われてみれば，スクロールバーの表示/非表示で，vwの値も変化しますね！

yoshinavi

2018/07/01 02:57

レスポンシブ要素の比率を変えないようにする場合、一般的には「vh」ではなく「vw」で「高さ」を取ります。どんなデバイスでも「Graph1,2」の比率を保つように見直されると良いかと思います。

liveasnotes

2018/07/01 03:05

ありがとうございます！比率の維持，気を付けたいと思います！ところで，vw,vhのところを固定値にしてみたところ，Firefoxでは前後関係バグが解消されたのですが，Chromeでは解消されないようです．まさかIEではなく，Chromeに惑わされるとは...