微信

Css3图片翻转

<!DOCTYPE html>
<html>
<head>
    <title>Css3图片翻转</title>
    <meta charset="utf-8" />
    <style>
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
}

.front {
    background:#0e1;
    z-index: 2;
    transform: rotateY(0deg);
}

.back {
    background:#ccc;
    transform: rotateY(-180deg);
}




.backs {
    transform: rotateY(0deg);
}
.fronts {
    transform: rotateY(180deg);
}


    </style>
</head>
<body>

<div class="flip-container">
    <div class="flipper">
        <div class="front" id="pid1">
            <!-- 前 -->
            <img src="./1.jpg"  style="width:100%;height:100%"/>
        </div>
        <div class="back" id="pid2">
            <!-- 后 -->
            <img src="./2.jpg"  style="width:100%;height:100%"/>
        </div>
    </div>
</div>


<button id="btn">  按 钮   </button>

<script>

    var _btn = document.getElementById("btn");
    var _pid1 = document.getElementById("pid1");
    var _pid2 = document.getElementById("pid2");
    _btn.onclick = function(){
        _pid1.className = "fronts front";
        _pid2.className = "backs back";
        
    }


</script>


</body>
</html>

 

posted @ 2015-06-26 11:55  Admin_info  阅读(366)  评论(0编辑  收藏  举报
青春时代是一个短暂的美梦,当你醒来时,这早已消失得无影无踪了。
点点Admin_info