1026.tv

パネルフリップ的なのを実装するときの注意

Published
Category
Tech
Tags

transform(or backface-visibility: hidden;)とposition: absolute;組み合わせて中の画像にimg {width:100%}かつheight指定しないとsafariで消える。img {width:100%}と書いたけど、多分画像のwidthheightどちらか片方だけcss側から%指定してやるのがダメな気がする。

更に、裏表両方にリンクを指定して負degでtransform: rotateY() すると、裏面が表示されている時クリッカブルエリアが半分になる。

何を言っているのか全くわからないと思うから、以下サンプル。

画像が消える件に関しては、height: auto;を書かなかったのが悪いだけだが、そういうこともあるんだよと。

クリッカブルエリアが半分になる件は、正degで回せばいいわけだが、クライアントに逆回転がいいと言われると死ぬ。
rotateY以外はまだ試していないため、お暇な方は検証してみては。