Q&A##困っていること
表裏用のdiv要素を合わせたラッパー要素をクリックすると表裏が切り替わるtransformで
Safari（OSX、iOS）だけが１８０度回転し停止した直後、表用の要素に切り替わってしまいます。
裏用要素を表示したまま止まっていてほしいのに勝手に表用になってしまうのです。
その時の表用要素内の文字は左右逆に表示される。
これを裏なら裏で止めておく方法はあるでしょうか？
たしかに他のブラウザでも（Chrome, FireFox）１８０度回転した直後、一瞬だけ、表側の表示がチラッとされるのですが・・・（Operaだけはそのチラつきもなく全く問題がありません）
またanimationなど代替案などありましたら教えていただきたいです
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Flash Cards</title> 6 <style> 7 body { 8 margin: 0; 9 background: #e0e0e0; 10 text-align: center; 11 font-family: Verdana, sans-serif; 12 color: #fff; 13 } 14 .card { 15 margin: 20px auto 20px; 16 width: 90%; 17 height: 100px; 18 cursor: pointer; 19 font-size: 38px; 20 line-height: 100px; 21 perspective: 100px; 22 transform-style: preserve-3d; 23 transition: transform 0.8s; 24 } 25 .card-front, 26 .card-back { 27 display: block; 28 width: 100%; 29 height: 100%; 30 border-radius: 5px; 31 position: absolute; 32 backface-visibility: hidden; 33 } 34 .card-front { 35 background: #fff; 36 color: #333; 37 } 38 .card-back { 39 background: #00aaff; 40 transform: rotateY(180deg); 41 } 42 .open { 43 transform: rotateY(180deg); 44 } 45 </style> 46 <script src="jquery.js"></script> 47 </head> 48 <body> 49 <div id="cardL1" class="card"> 50 <div class="card-front">Yes</div> 51 <div class="card-back">No</div> 52 </div> 53 54 <script> 55 (() => { 56 "use strict"; 57 58 $(".card").click(function() { 59 if ($(this).hasClass("open")) { 60 $(this).removeClass("open"); 61 } else { 62 $(this).addClass("open"); 63 } 64 }); 65 66 })(); 67 68 </script> 69 </body> 70</html> 71
回答1件
0
自己解決
挙動的には満足できるものではありませんが
とりあえずは以下を追加してしのぎました
CSS
1 .open .card-front { 2 display: none; 3 }
投稿2019/09/13 03:49
総合スコア41
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。