Q&A
css の3Dのtransformを使っていると（chromeで確認しながら作っていたのですが）IEとFireFoxで表示が異なってしまい困りました
↓矢印（下部にあらかじめ表示）
↑矢印（右下にあるがtransform: rorateX(180deg)としておき隠しておく）
そしてjavascriptで#bottomに.transformをつけたり消したりして
くるっと180°回して消したり現したりしたいです
IEでは
・↑矢印が表示されない
・↓矢印が回転しても見える。
FireFoxでは
・↓矢印が回転しても見える。（↑矢印はchromeと同じ表示）
↓矢印が回転しても表示されるときは、なぜか回転の軸が下辺（？下から50pxっぽいです）にあり、回転後の矢印がbottom: 0pxの位置になりました
transform-origin: center;としても変化なしでした
###ソースコード
html
1 2 <!--ボタン--> 3 <div id="bottom"> 4 <div><a id="bottomdown">▼</a></div> 5 <div><a id="bottomup">▲</a></div> 6 </div> 7
css
1#bottom { 2 position: fixed; 3 width: 100%; 4 height: 100px; 5 display: block; 6 z-index: 3; 7 left: 0px; 8 bottom: 0px; 9 text-decoration: none; 10 text-align: center; 11 background-color: transparent; 12 transition: 0.75s; 13 transform-style: preserve-3d; 14 pointer-events: none; 15} 16#bottomup { 17 position: absolute; 18 width: 50px; 19 height: 50px; 20 right: 50px; 21 z-index: 4; 22 display: block; 23 transform: rotateX(180deg); 24 backface-visibility: hidden; 25 background-color: rgb(245, 245, 245); 26 pointer-events: all; 27} 28#bottomdown { 29 width: 100%; 30 height: 50px; 31 z-index: 4; 32 display: block; 33 text-decoration: none; 34 backface-visibility: hidden; 35 background-color: transparent; 36 pointer-events: all; 37} 38.transform { 39 transform: rotateX(-180deg); 40}
IEとFireFoxではbackface-visibility: hidden;が効いていないのかと思いますが(でもそれだと最初に↑矢印は表示されるはず…)対処法が分かりません。
又、IEで↑矢印が表示されない理由もわかりません。
ご教授お願いいたしますm(_ _)m
回答1件
0
ベストアンサー
chrome環境では正しい動きをしているということでしたら、ベンダープレフィックスをつけてみると解決するかもしれないです。
追記
具体的にどういう動きを付けたいのかを理解できなかったのですが、単純に▼▲の２つを切り替えるだけであれば、以下のソースコードで実装できると思います。
html
1<html> 2 <head> 3 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 4 </head> 5 <body> 6 <!--ボタン--> 7 <div id="bottom"> 8 <div><a id="bottomdown">▼</a></div> 9 <div class="hidden"><a id="bottomup">▲</a></div> 10 </div> 11 </body> 12</html>
css
1#bottom { 2 text-align: center; 3 width: 100%; 4} 5 6.hidden { 7 display: none; 8}
javascript
1$(function(){ 2 $('#bottomdown, #bottomup').on('click', function(){ 3 $('#bottom div').toggleClass('hidden'); 4 }); 5});
投稿2016/01/17 15:17
編集2016/01/17 15:38
総合スコア181
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。