投稿記事

transform rotate

09 Oct 2015


FRONT
BACK

ボックスをクリックしてください

-- HTML --

<section class="box-container">
<div id="card">
    <figure id="card1" class="front">FRONT</figure>
    <figure id="card2" class="back">BACK</figure>
</div>
</section>
-- Javascript --
$(".box-container").css({
                         "height": "200px",
                         "width": "400px",
                         "postion":"relative",
                         "perspective":"800px"
                       });
$('#card').css({
                "height":"100%",
                "width":"100%",
                "position":"absolute",
                "transform-style": "preserve-3d",
              });
$("figure").css({
                 "display": "block",
                 "position": "absolute",
                 "width": "100%",
                 "height": "100%",
                 "backface-visibility": "hidden",
                });
$('.front').css({
                 "background":"gold",
               });
$('.back').css({
                "background":"lime",
                "transform":"rotateY(180deg)",
               });
$("#card1").on("click",function(){
        $("figure").css({
                     "transition": "transform 1s"
                   });
        $("#card1").css({
                     "transform":"rotateY(-180deg)",
                   });
        $("#card2").css({
                     "transform":"rotateY(0deg)",
                    });
});
$("#card2").on("click",function(){
        $("#card1").css({
                     "transform":"rotateY(0deg)",
                   });
        $("#card2").css({
                     "transform":"rotateY(180deg)",
                   });
    });