UNIRRY

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

css3でクリックしたら3D回転するカード捲りのサンプル

rotate1

クリックで、3D回転するサンプルです。ただしIE10以外のIE系では動きません。IE10以下でもcss3がきくようのプラグインをいれればきくかもです(でもやってみてませヌ)。

html

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

3D回転させるjs

var flag = false;
var list = $("#cardlist li");
  
list.click(function(){
    if ( $(this).is(".selected") ) {
        $(this).removeClass("selected");
        var linum = $("#cardlist li").index(this);
        cardRotate2(linum);
    } else {
        $(this).addClass("selected");
        var linum = $("#cardlist li").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)");
  } , 500);    
}
// カードもどし用関数
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)");
  
  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)");
  } , 500);    
}

css

#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.5s -webkit-transform;
-moz-transition:ease-out 0.5s -moz-transform;
transition:ease-out 0.5s 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.5s -webkit-transform;
-moz-transition:ease-out 0.5s -moz-transform;
transition:ease-out 0.5s transform;
}

クリックで3D回転するサンプル

サンプル

3dsample


horoscope

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