使用输入框通过CSS点击事件翻转卡片的方法如下:
<div class="card-container">
<div class="card-front">
<!-- 正面内容 -->
</div>
<div class="card-back">
<!-- 背面内容 -->
</div>
</div>
.card-container {
perspective: 1000px; /* 设置透视视角 */
}
.card-front, .card-back {
width: 200px;
height: 200px;
position: absolute;
backface-visibility: hidden; /* 隐藏背面内容 */
transition: transform 0.6s; /* 添加过渡效果 */
}
.card-back {
transform: rotateY(180deg); /* 初始状态为背面朝上 */
}
const input = document.querySelector('input');
const cardContainer = document.querySelector('.card-container');
input.addEventListener('click', function() {
cardContainer.classList.toggle('flipped');
});
.card-container.flipped .card-front {
transform: rotateY(180deg);
}
.card-container.flipped .card-back {
transform: rotateY(0deg);
}
通过以上步骤,当输入框被点击时,卡片会在正面和背面之间进行翻转。你可以根据实际需求,自定义卡片的样式和内容。
领取专属 10元无门槛券
手把手带您无忧上云