Q&A
実現したいこと
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件
0
ベストアンサー
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
総合スコア33106
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/05/30 09:09