質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

transform: translate(0, 0)のアイテムにズラした背景を設置したい

mumu1354
mumu1354

総合スコア3

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0グッド

0クリップ

355閲覧

投稿2022/11/30 12:05

編集2022/12/05 05:18

前提

イメージ説明
大きさは b>a

実現したいこと

aの後ろにbのような背景を作成したいです。
codepen
https://codepen.io/yon-s/pen/KKebPgp

発生している問題・エラーメッセージ

aに

css

1opacity: 1;

を設定しているため
aに
transform-style: preserve-3d;
bに

css

1 transform: translateZ(-1px);

をつけても背面に行かない

該当のソースコード

HTML

1<div class="box-inner"> 2 <section class="section"> 3 <div class="box0"> 4 </div> 5 </section> 6 <section class="section2"> 7 <h2 class="section2__ttl">タイトル</h2> 8 <div class="fade-in fade-in-up box"> 9 <ul class="box__list"> 10 <li class="box__list-item"> 11 <div class="box__list-icon"> 12 <i class="box__fas fas fa-thumbs-up"></i> 13 </div> 14 <h3 class="box__list-ttl">Good</h3> 15 <p class="box__txt">テキストテキストテキストテキストテキストテキスト</p> 16 </li> 17 <li class="box__list-item"> 18 <div class="box__list-icon"> 19 <i class="box__fas fas fa-thumbs-up"></i> 20 </div> 21 <h3 class="box__list-ttl">Good</h3> 22 <p class="box__txt">テキストテキストテキストテキストテキストテキスト</p> 23 </li> 24 <li class="box__list-item"> 25 <div class="box__list-icon"> 26 <i class="box__fas fas fa-thumbs-up"></i> 27 </div> 28 <h3 class="box__list-ttl">Good</h3> 29 <p class="box__txt">テキストテキストテキストテキストテキストテキスト</p> 30 </li> 31 <li class="box__list-item"> 32 <div class="box__list-icon"> 33 <i class="box__fas fas fa-thumbs-up"></i> 34 </div> 35 <h3 class="box__list-ttl">Good</h3> 36 <p class="box__txt">テキストテキストテキストテキストテキストテキスト</p> 37 </li> 38 <li class="box__list-item"> 39 <div class="box__list-icon"> 40 <i class="box__fas fas fa-thumbs-up"></i> 41 </div> 42 <h3 class="box__list-ttl">Good</h3> 43 <p class="box__txt">テキストテキストテキストテキストテキストテキスト</p> 44 </li> 45 <li class="box__list-item"> 46 <div class="box__list-icon"> 47 <i class="box__fas fas fa-thumbs-up"></i> 48 </div> 49 <h3 class="box__list-ttl">Good</h3> 50 <p class="box__txt">テキストテキストテキストテキストテキストテキスト</p> 51 </li> 52 </ul> 53 </div> 54 </section> 55</div>

css

1//sass 2.box-inner{ 3 padding: 0 15.66vw; 4 color: #E4EAF3; 5} 6.box0{ 7 height:100svh; 8 width:100%; 9 background-color: #800080; 10} 11.section2{ 12 margin-top:440px; 13 position: relative; 14 &__ttl{ 15 font-size: 1.5rem; 16 margin: 0; 17 letter-spacing: 0.1875rem; 18 padding: 152px 74px; 19 background-color: #800080; 20 display: inline-block; 21 position: absolute; 22 right: 0; 23 top: -156px; 24 z-index: 1; 25 } 26} 27.box{ 28 margin-left: -15.66vw; 29 margin-right: 183px; 30 margin-top: 156px; 31 padding-right: 304px; 32 padding-left: 15.66vw; 33 padding-top: 116px; 34 padding-bottom: 142px; 35 background-color: #908fb1; 36 box-sizing: border-box; 37 position: relative; 38 transform-style: preserve-3d; 39 &::after { 40 opacity: 1; 41 width: calc(100vw - 15.66vw); 42 content: ''; 43 background-color: #bbbcd2; 44 position: absolute; 45 height: calc(100% + 32px); 46 top: -84px; 47 z-index: -1; 48 -webkit-transform: translateZ(-1px); 49 transform: translateZ(-1px); 50 } 51 &__list{ 52 display: flex; 53 justify-content: end; 54 flex-wrap: wrap; 55 padding-left: 0; 56 list-style: none; 57 margin-top: -116px; 58 margin-left: -96px; 59 } 60 &__list-item{ 61 width: 224px; 62 text-align: center; 63 margin-top: 116px; 64 margin-left: 96px; 65 } 66 &__list-icon { 67 width: 100px; 68 margin: 0 auto; 69 } 70 &__fas{ 71 font-size: 56px; 72 } 73 &__list-ttl{ 74 margin-top: 16px; 75 margin-bottom: 0; 76 font-size: 1.25rem; 77 font-weight: 600; 78 } 79 &__txt { 80 text-align: left; 81 line-height: 1.65; 82 } 83} 84.fade-in { 85 opacity: 0; 86 transition-duration:2s; 87 transition-property:opacity,transform; 88} 89 90.fade-in-up { 91 transform: translate(0, 50px); 92} 93 94.scroll-in { 95 opacity: 1; 96 transform: translate(0, 0); 97}

JavaScript

1let fadeInTarget = document.querySelectorAll('.fade-in'); 2window.addEventListener('scroll', () => { 3 for (let i = 0; i < fadeInTarget.length; i++){ 4 const rect = fadeInTarget[i].getBoundingClientRect().top; 5 const scroll = window.pageYOffset || document.documentElement.scrollTop; 6 const offset = rect + scroll; 7 const windowHeight = window.innerHeight; // 現在のブラウザの高さ 8 if (scroll > offset - windowHeight + 150) { 9 fadeInTarget[i].classList.add('scroll-in'); 10 } 11 } 12});

aに

css

1transform: translate(0, 0);

がついている理由は

スクロールすると

css

1//スクロール前 2transition-duration:2s; 3transition-property:opacity,transform; 4opacity: 0; 5transform: translate(-50%, 0); 67//スクロール後 8opacity: 1; 9transform: translate(0, 0);

で表示させているためです。

.aがスクロールのトリガーとなっているため(aの上までスクロールするとaが表示)
aの疑似要素で実現したいとおもっています。

bのほうが大きい(width: calc(100vw - 15.66vw);
height: calc(100% + 32px);
)ため
box-shadowではできませんでした。

試したこと

css

1.a{ 2z-index: 100; 3 transform: translate3d(0px, 0px, 200px); 4&::after (b){ 5z-index: 10; 6transform: translate3d(0px, 0px, 100px); 7} 8 } 9

補足情報(FW/ツールのバージョンなど)

transformのz軸とz-indexでややこしくなった時の対処法 – 『CSS』
https://webmanab-html.com/tip/transform-z-index-safari-bug/

以上よろしくおねがいします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

2

ベストアンサー

transform-style: preserve-3d;で子要素を 3D 空間に配置することによって、translateZ() で背面に移動させることが可能になります。

transform-style - CSS: カスケーディングスタイルシート | MDN

コード例

SCSS

1.a { 2 width: 800px; 3 height: 600px; 4 position: relative; 5 transform: translate(0, 0); 6 background-color: #908fb1; 7 margin-top: 150px; 8 transform-style: preserve-3d; 9 &::after { 10 width: 850px; 11 height: 650px; 12 content: ""; 13 position: absolute; 14 top: -100px; 15 right: -100px; 16 z-index: -1; 17 background-color: #bbbcd2; 18 transform: translateZ(-1px); 19 } 20}

[CodePenサンプル](https://codepen.io/hatena19/pen/yLExPGd

追記

質問者さんの現状のコード↓
https://codepen.io/yon-s/pen/KKebPgp

上記は、opacity: 0; で .a要素を透明にしているので、transform-style: preserve-3d;が無効になるので、上の回答の方法ではうまくきません。
また、z-index で疑似要素を親要素の背面に移動させることもできません。

そこで、親要素の背景色を ::before疑似要素に設定するようにして、z-index で前後位置を指定すればうまくいきました。
改良サンプル↓
https://codepen.io/hatena19/pen/KKebKNv

投稿2022/11/30 12:51

編集2022/12/05 05:18
hatena19

総合スコア32016

spoofy_dragon, Cocodeを押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

mumu1354

2022/12/01 03:10 編集

hatena19様 ありがとうございます。このCSSでできました。 申し訳ありません。自分の記入不足のせいで問題が一つ発生しております。 それはスクロールしたときの表示時(読み込み時)にbが前面になってしまうことです。 b前面→a前面 と変換します。 理想は読み込み時からa前面です。 原因は aに //スクロール前 transition-duration:2s; をつけているからだと思います。 bにも同様に //スクロール前 transition-duration:2s; transition-property:opacity,transform; opacity: 0; ↓ //スクロール後 opacity: 1; をつけてみたのですが改善されませんでした。 この問題を解説する方法をご教授いただけないでしょうか?
hatena19

2022/12/01 09:00

スクロールしたときに表示させるのはJSでしているのでしょうか。 それが提示されていないので、推測で回答するしかないですが、 スクロール前に aに transform-style: preserve-3d; bに transform: translateZ(-1px); が効いているか確認してはどうでしょうか。 効いていれば、bは背面に表示されるはずです。 それで分からないなら、JSも含めて現象を再現できるコードを質問に追記してください。
mumu1354

2022/12/01 10:08 編集

hatena19様 ご返信ありがとうございます。 スクロール前に aに transform-style: preserve-3d; bに transform: translateZ(-1px); は効いておりました。 jsこちらになります。 https://codepen.io/yukinouz1/pen/mdeNQXe aが.fade-in.boxの部分になります
hatena19

2022/12/01 12:02

無駄なやりとりを省くために、現象を再現出るサンプルを提示してもらえませんか。 提示のサンプルには、transform-style: preserve-3d; も transform: translateZ(-1px); もないです。
hatena19

2022/12/01 12:33

自分のサンプルで確認したところ、opacity を1未満にすると transform-style: preserve-3d; が効かなくなるようです。opacity と transform-style は相性が悪いみたいですね。 > bのほうが大きいためbox-shadowではできませんでした。 とのことですが、4番目の引数で広がりを設定できますので、影の大きさも設定できますが、それではだめですか。ぼかし(3番目の引数)を0 にすれば同じような見た目にできます。 例えば、 box-shadow: 30px -30px 0px 15px #bbbcd2;
mumu1354

2022/12/05 00:28

hatena19様 ご返信ありがとうございます。 お手数おかけして申し訳ありませんでした。 box-shadowについてですが 今回はbを width: calc(100vw - 15.66vw); height: calc(100% + 32px); という形(x,yが均等ではない)ですので box-shadowは使えませんでした。 ちなみに aにpadding-left: 15.66vw;をつけてbを横にずらしております
hatena19

2022/12/05 00:53

そのように後から情報を小出しにするのではなく、最初から現状のコードを『すべて』提示して、どこが想定と違いうかを明確に説明するようにしてください。 無駄なやりとりを何度も繰り返すのは時間の無駄です。
hatena19

2022/12/05 05:01

質問は編集できますので、質問のそのコードあるいはリンクを追記してください。後から見た人はこのコメント欄までは見ないことが多いので。
mumu1354

2022/12/05 05:19

hatena19様 承知しました。 教えていただきありがとうございます。
mumu1354

2022/12/05 11:07

頂いた改良サンプル通りにしたら実装できました。 ありがとうございました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。