回答編集履歴
2
コード追記
test
CHANGED
|
@@ -25,5 +25,17 @@
|
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
```
|
|
28
|
-
[CodePenサンプル](https://codepen.io/hatena19/pen/yLExPGd
|
|
28
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/yLExPGd
|
|
29
29
|
|
|
30
|
+
追記
|
|
31
|
+
---
|
|
32
|
+
**質問者さんの現状のコード↓**
|
|
33
|
+
https://codepen.io/yon-s/pen/KKebPgp
|
|
34
|
+
|
|
35
|
+
上記は、opacity: 0; で .a要素を透明にしているので、`transform-style: preserve-3d;`が無効になるので、上の回答の方法ではうまくきません。
|
|
36
|
+
また、z-index で疑似要素を親要素の背面に移動させることもできません。
|
|
37
|
+
|
|
38
|
+
そこで、親要素の背景色を ::before疑似要素に設定するようにして、z-index で前後位置を指定すればうまくいきました。
|
|
39
|
+
**改良サンプル↓**
|
|
40
|
+
https://codepen.io/hatena19/pen/KKebKNv
|
|
41
|
+
|
1
説明修正
test
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
`z-index`は同じ同じブロック内での要素の前後位置を設定するものです。
|
|
2
|
-
`.a::after`疑似要素は `.a`の子要素なので、`z-index`で `.a` の背面に移動させることはできません。
|
|
3
|
-
|
|
4
1
|
`transform-style: preserve-3d;`で子要素を 3D 空間に配置することによって、`translateZ()` で背面に移動させることが可能になります。
|
|
5
2
|
|
|
6
3
|
[transform-style - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/transform-style)
|