将网上找到的一个方法进行了修改,实现通过非按钮点击进行卡片左右反转,根据反转次数显示当前面的信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my</title>
<style>
#goAfter,
#goBefore{
width: 20px;
height: 20px;
border-style: solid;
padding: 10px 10px;
background-color: #dbde1b;
}
.courseLogo{
width: 120px;
height: 132px;
float: left;
margin-top: 1px;
position: absolute;
box-sizing: border-box;
perspective: 800px;
}
.courseBefore{
width: 100%;
height: 100%;
position: absolute;
background-color: pink;
background-repeat: no-repeat;
backface-visibility: hidden;
transition: 1s;
}
.courseAfter{
width: 100%;
height: 100%;
position: absolute;
background-color: dodgerblue;
transform: rotateY(-180deg);
backface-visibility: hidden;
transition: 1s;
}
.courseLogo:hover .courseBefore{
transform: rotateY(180deg);
}
.courseLogo:hover .courseAfter{
transform: rotateY(0deg);
}
</style>
<script>
var angle1=0;
var angle2=-180;
var t =0;
var tp = 0;
var page=new Array("page1","page2","page3");
function ff(a) {
if(a=="1"){
document.getElementById('id1').style.display='none';
document.getElementById('id2').style.display='inline';
}else{
document.getElementById('id1').style.display='inline';
document.getElementById('id2').style.display='none';
}
}
function goc(c) {
if(c=="A"){
angle1+=180;
angle2+=180;
tp=(++tp)%3;
t++;
var k1='rotateY('+angle1+'deg)';
var k2='rotateY('+angle2+'deg)';
document.getElementById('courseBefore').style.transform= k1;
document.getElementById('courseAfter').style.transform= k2;
document.getElementById('a1').innerText=angle1;
document.getElementById('a2').innerText=angle2;
if(t%2==0){
document.getElementById('courseBefore').innerText=page[tp];
}else{
document.getElementById('courseAfter').innerText=page[tp];
}
}else{
angle1-=180;
angle2-=180;
tp=(--tp+3)%3;
t--;
var k1='rotateY('+ angle1 +'deg)';
var k2='rotateY('+ angle2 +'deg)';
document.getElementById('courseBefore').style.transform= k1;
document.getElementById('courseAfter').style.transform= k2;
document.getElementById('a1').innerText=angle1;
document.getElementById('a2').innerText=angle2;
if(t%2==0){
document.getElementById('courseBefore').innerText=page[tp];
}else{
document.getElementById('courseAfter').innerText=page[tp];
}
}
}
</script>
</head>
<body>
<div id="goAfter" title="A" onclick="goc(this.title)">Left</div>
<div id="goBefore"title="B" onclick="goc(this.title)">Right</div>
<div>
<p><b>angle1:</b><i id="a1">0</i></p>
<p><b>angle2:</b><i id="a2">180</i></p>
</div>
<div class="courseLogo">
<div id="courseBefore" class="courseBefore">page1</div>
<div id="courseAfter" class="courseAfter">page2</div>
</div>
</body>
</html>