回答 受付中

Velocity.jsでY軸回転がEdgeのみダメ

  • 暇なときにでも
  • 質問No.9555761
  • 閲覧数42
  • ありがとう数0
  • 気になる数0
  • 回答数0

お礼率 0% (0/46)

Velocity.jsでY軸回転を試していたのですがEdgeでのみうまくいきません。最新のchromeとie11とfirefoxではうまくいきました。回転させて裏が表示されれば表は隠れて表示されないはずですが、Edgeだと真ん中に細く表示されています。下記がソースです。すぐ再現できるようにhtmlファイルにコピペすればいいようにしました。どのような解決策があるでしょうか? また、このような場合Velocity.jsの問題なのかEdgeの問題なのかどちらになるのでしょうか?
後コピペしたhtmlファイルはapacheなどのサーバー内に置かないと動作しないみたいです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<style>
body,div,p{
margin:0;padding:0;
}
#wrapper{
width: 100px;
height: 120px;
margin: auto;
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
}
#card {
position: relative;
top: 0px;
left:0px;
width: 100px;
height: 120px;
background-color: #0CF;
font-size: 100px;
z-index: 2;
overflow:hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
#cardu {
position: relative;
top: -120px;
left:0px;
width: 100px;
height: 120px;
background-color: #F6F;
font-size: 100px;
z-index: 1;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="card"><p>表</p></div>
<div id="cardu"><p>裏</p></div>
</div>
<button id="button">回転</button>
<script>
let l=0;
$('#cardu').velocity({
rotateY:180
},{
duration:0
});
$('button').click(function() {
if(l==0){
$('#card').velocity({
rotateY:180
},{
duration:1000
});
$('#cardu').velocity({
rotateY:360
},{
duration:1000
});
l=1;
}else{
$('#card').velocity({
rotateY:360
},{
duration:1000,
complete:function() {
$('#card').velocity({
rotateY:0
},{
duration:0
});
}
});
$('#cardu').velocity({
rotateY:540
},{
duration:1000,
complete:function() {
$('#cardu').velocity({
rotateY:180
},{
duration:0
});
}

});
l=0;
}
})
</script>
</body>
</html>
現在回答を募集しています。
感謝経済
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


感謝指数をマイページで確認!

ピックアップ

ページ先頭へ