UNIRRY

WEBデザインとホロスコープと宇宙のブログ

3D回転を使ったカードめくりをオンマウスにしてみた

rotate2

3D回転を使ったカードめくりをオンマウスにしてみたので記載します。IE9以下はcss3のトランジションがきかないので動作しません。

3D回転するjs

  var flag = false;
  var list = $("#cardlist li");
  
  list.hover(function(){
      var linum = $("#cardlist li").index(this);
      cardRotate1(linum);
  }, function(){
      var linum = $("#cardlist li").index(this);
      cardRotate2(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)");
    mekuriA(linum);
  }
  
  function cardRotate2(linum) {
    list.eq(linum).children(".ura").css("-webkit-transform" , "perspective(500) rotateY(90deg)");
    list.eq(linum).children(".ura").css("-moz-transform" , "perspective(500px) rotateY(90deg)");
    list.eq(linum).children(".ura").css("transform" , "perspective(500px) rotateY(90deg)");
    mekuriB(linum); 
  }
  
  function mekuriA(linum){
    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)");
    } , 100);
  }
  
  function mekuriB(linum){
    setTimeout(function(){
        list.eq(linum).children(".omote").css("-webkit-transform" , "perspective(500) rotateY(0deg)");
        list.eq(linum).children(".omote").css("-moz-transform" , "perspective(500px) rotateY(0deg)");
        list.eq(linum).children(".omote").css("transform" , "perspective(500px) rotateY(0deg)");
    } , 100);
  }

html部分

<div id="cardlist">
<ul>
<li>
<div class="omote"><img src="car2.jpg"></div>
<div class="ura"><img src="ura2.jpg"></div>
</li>
<li>
<div class="omote"><img src="car1.jpg"></div>
<div class="ura"><img src="ura1.jpg"></div>
</li>
</ul>
</div>

css

#cardlist ul {
width: 510px;
margin: 100px auto 30px auto;
}
#cardlist li {
position: relative;
float: left;
margin: 0 20px 20px 0;
width: 150px;
height: 210px;
list-style: none;
cursor: pointer;
}
.omote {
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.1s -webkit-transform;
-moz-transition:ease-out 0.1s -moz-transform;
transition:ease-out 0.1s transform;
}
.ura {
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.1s -webkit-transform;
-moz-transition:ease-out 0.1s -moz-transform;
transition:ease-out 0.1s transform;
}

オンマウスで3D回転するカードめくりサンプル

サンプル

※注意※ マウスを素早く動かすと、全然めくりがついてきてくれません。なのであんまり使えなさそう。


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3