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