css3的3D翻牌效果

news/2024/7/8 2:28:00 标签: javascript

利用hover控制动画，一个从翻面向正面翻，一个从正面向反面翻。

利用：backface-visibility: hidden;控制反面的元素不显示。

不支持的浏览器直接切换层级换图。

<!DOCTYPE html>
<html>
<head>
    <title>css3双面翻转</title>
</head>
<style type="text/css">
.game {
    display: block;
    width: 320px;
    height: 200px;
    padding-top: 100px;
    margin:0 auto;
}
.game a {
    display: block;
    width: 320px;
    height: 200px;
    position: relative;
    -webkit-transform: perspective(1000px);
    -webkit-transform-style: preserve-3d;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform: perspective(1000px);
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.game a:hover {
    z-index: 20;
}
.game a:hover .back {
    z-index: 10;
}
.game img {
    vertical-align: top;
}

.game .back {
    cursor: pointer;
    backface-visibility: hidden;
    width: 320px;
    height: 200px;
    background: #000;
    position: absolute;
    top: 0px;
    left: 0px;
}
.game a:hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg)
    display:block;
}
.game a:hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg)
}
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
    transition: 0.6s;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    display: table;
    background-size: cover;
    background-position: center
}
.front {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg)
}
.back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg)
}

</style>
<body>
    <div class="game">
        <a class="new_game" href="javascript:void(0);">
            <div class="back">
                <div class="text"><img src="http://i0.cy.com/wf/pic/2015/0902/main_a3.jpg" width="320" height="200" ></div>
                <!--<p>8月7日超能内测 </p>-->
            </div>
            <div class="front">
                <div class="text"><img src="http://i0.cy.com/wf/pic/2015/0902/main_a2.jpg" width="320" height="200" ></div>
            </div>
        </a>
    </div>
</body>
</html>