swiperにデフォルトで設定されているtransformを消したい

実現したいこと

transformのscaleでswiperの画像サイズを小さくしたいのですがtransformを消すことができない

前提

スワイパーで3枚のスライド表示し、真ん中(active状態)以外の左右2枚だけをtransform: scale();で小さくしたいです。
そのため.swiper-slide-prevと.swiper-slide-nextにtransform: scale();を設定したのですが、transform: translateZ(0)というスタイルがデフォルトで設定されており、transform: scale();がかき消されてしまいうまくできません(画像参照)
ブラウザの検証画面よりtransform: translateZ(0)のチェックを外すとscaleがうまく適応されたのでこれさえ消せれば...という感じなのですが...

該当のソースコード

CSS
1.swiper-backface-hidden .swiper-slide {
2        transform: translateZ(0);
3        -webkit-backface-visibility: hidden;
4        backface-visibility: hidden;
5}
6

試したこと

.swiper-backface-hiddenと.swiper-slideにtransform: none;を設定する
swiperをjsより前で読み込んでいるか確認

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

必要な情報があれば追記します

行動規範の内容に同意します

回答1件

ベストアンサー

CSSのセレクタには詳細度というものがあります。詳細度が高いものが優先されます。

詳細度 - CSS: カスケーディングスタイルシート | MDN

scale の詳細度を上げればどうでしょう。例えば、

css
1.swiper-backface-hidden .swiper-slide-prev, .swiper-backface-hidden .swiper-slide-next{
2  transform: scale(.8);
3}

投稿2023/05/27 19:34

hatena19

総合スコア33715

obito

2023/05/30 09:09

解決できました、ありがとうございます。詳細度という概念を完全に忘れていました。もう少し勉強したいと思います。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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