css 翻转特效
来源:奇站网络 浏览量:248 发布日期:
2024-04-19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.flip-card {
perspective: 1000px;
/* 创建3D效果 */
}
.flip-card-inner {
width: 200px;
height: 200px;
/* background-color: #f5f5f5; */
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card-front,
.flip-card-back {
backface-visibility: hidden;
/* 隐藏翻转的背面 */
position: absolute;
width: 100%;
height: 100%;
transition: transform 1s;
z-index: 99;
}
.flip-card-front {
background-color: antiquewhite;
}
.flip-card-back {
background-color: aquamarine;
transform: rotateY(180deg);
/* 初始状态下翻转背面 */
}
.flip .flip-card-front {
transform: rotateY(-180deg);
}
.flip .flip-card-back {
transform: rotateY(0);
}
</style>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
正面
</div>
<div class="flip-card-back">
背面
</div>
</div>
</div>
<button onclick="flipCard()">点击翻转卡片</button>
</body>
<script>
function flipCard() {
var card = document.querySelector('.flip-card');
card.classList.toggle('flip');
}
</script>
</html>
标签:
- 版权所有:奇站网络 转载请注明出处
- 厦门奇站网络科技有限公司,专业提供网站建设,响应式网站建设,小程序开发,系统定制开发。
- 软件开发咨询热线:吴小姐 13313868605