【CSS3】カードを3D回転させる【JQuery】
4ならんでいるうちの右端のカードだけロード時に自動回転させるイメージ
【HTML】
<div id="card">
<ul>
<li><img src='../image/card/big_6.gif' width='50px'></li>
<li><img src='../image/card/big_3.gif' width='50px'></li>
<li><img src='../image/card/big_8.gif' width='50px'></li>
<li class="return">
<div class="front"><img src='../image/card/big_kari.gif' width='50px'></div>
<div class="back"><img src='../image/card/big_0.gif' width='50px'></div>
</li>
</ul>
<p style="clear:both"></p>
</div>
【CSS】
#card li {
position: relative;
float: left;
margin: 0 20px 20px 0;
width: 50px;
height: 210px;
list-style: none;
cursor: pointer;
}
.front{
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(1000) rotateY(0deg);
-moz-transform:perspective(1000px) rotateY(0deg);
transform:perspective(1000px) rotateY(0deg);
-webkit-transition:ease-out 0.5s -webkit-transform;
-moz-transition:ease-out 0.5s -moz-transform;
transition:ease-out 0.5s transform;
}
.back {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(1000) rotateY(90deg);
-moz-transform:perspective(1000px) rotateY(90deg);
transform:perspective(1000px) rotateY(90deg);
-webkit-transition:ease-out 0.5s -webkit-transform;
-moz-transition:ease-out 0.5s -moz-transform;
transition:ease-out 0.5s transform;
}
【JS】
window.onload = function(){
var flag = false;
var list = $("#cardlist li.return");
var linum = $("#cardlist li.return").index(this);
cardRotate1(linum);
function cardRotate1(linum) {
list.eq(linum).children(".omote").css("-webkit-transform" , "perspective(500) rotateY(-90deg)");
list.eq(linum).children(".omote").css("-moz-transform" , "perspective(500px) rotateY(-90deg)");
list.eq(linum).children(".omote").css("transform" , "perspective(500px) rotateY(-90deg)");
setTimeout(function(){
list.eq(linum).children(".ura").css("-webkit-transform" , "perspective(500) rotateY(0deg)");
list.eq(linum).children(".ura").css("-moz-transform" , "perspective(500px) rotateY(0deg)");
list.eq(linum).children(".ura").css("transform" , "perspective(500px) rotateY(0deg)");
} , 400);
}
}
追記：css3の３Dアニメーションは、スマホだとandroid2.系列で動かない模様。
