css 实现 div 翻转样式
css 实现 div 翻转样式。
<html>
<head>
<meta charset="UTF-8">
<title>css 实现 div 翻转样式</title>
<style>
#container{text-align:center;width:100%;background-color:#ccc;}
.box{
width:300px;height:300px;text-align:center;background-color:#ffe4e4;margin:0 auto;
position:relative;
perspective:1000px;
#loginBox, #registerBox{
transform-style:preserve-3d;
backface-visibility:hidden;
transition-duration:.5s;
transition-timing-function:'ease-in';
}
#registerBox{
transform:rotateY(180deg);
visibility:hidden;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
}
#loginBox{width:200px;height:300px;border-radius:4px;background-color:red;}
#registerBox{width:200px;height:300px;border-radius:4px;background-color:blue;}
.boxReverse{
#loginBox{
transform:rotateY(180deg);
visibility:hidden;
}
#registerBox{
transform:rotateY(360deg);
visibility:visible;
}
}
</style>
</head>
<body>
<div id="container">
<div class="box" id="reverse">
<div id="loginBox"><div>正面</div><button onclick="changeReverse()">去反面</button></div>
<div id="registerBox"><div>反面</div><button onclick="changeReverse()">去正面</button></div>
</div>
</div>
<script>
let isRolling = false;
function changeReverse() {
isRolling = !isRolling;
if (isRolling) {
document.getElementById("reverse").className = "box boxReverse";
} else {
document.getElementById("reverse").className = "box";
}
}
</script>
</body>
</html>
转载请注明出处：php程序员的笔记
最后修改时间：2024年01月30日 21时56分 文章来源：yuhaomiao