css及js实现正反面翻转

一、两种翻转方式：

结构

<div class="card">
	<div class="front">正面</div>
	<div class="back">背面</div>
</div>
<button class="flip">翻转</button>

鼠标悬停：通过CSS的:hover伪类实现

1. transform-style: preserve-3d：这是3D变换的关键，确保子元素在3D空间中变换，而不是被压扁到2D平面
2. backface-visibility: hidden：隐藏元素的背面，这是实现"卡片翻转"效果而非"内容镜像"的关键
3. .back { transform: rotateY(180deg); } ：背面初始旋转180度，使其朝后隐藏
4. transition: transform 0.6s：为transform属性添加0.6秒的过渡动画，使翻转过程平滑

.card {
		width: 200px;
		height: 200px;
		position: relative;  /* 设置为相对定位，作为子元素的定位基准 */
		transform-style: preserve-3d;  /* 保持3D变换效果，使子元素在3D空间内变换 */
		transition: transform 0.6s;  /* 添加transform属性的过渡效果，持续0.6秒 */
	}
	.front, .back {
		position: absolute;  /* 绝对定位，使正反面重叠 */
		width: 100%;
		height: 100%;
		backface-visibility: hidden;  /* 隐藏元素的背面，防止翻转时看到镜像内容 */
	}
	/* 正面样式 */
	.front {
		background-color: lightgreen;  /* 正面背景色为浅绿色 */
	}
	/* 背面样式 */
	.back {
		background-color: lightblue;  /* 背面背景色为浅蓝色 */
		transform: rotateY(180deg);  /* 初始状态旋转180度，使背面朝后隐藏 */
	}
	/* 鼠标悬停效果 */
	.card:hover {
		transform: rotateY(180deg);  /* 鼠标悬停时，卡片沿Y轴旋转180度 */
	}

按钮点击：通过JavaScript事件监听实现

1. 通过querySelector获取卡片和按钮元素

2. 为按钮添加点击事件监听器

3. 使用条件运算符切换卡片的翻转状态：

   • 如果卡片已有transform样式，则清除（返回正面）
   • 如果卡片没有transform样式，则添加rotateY(180deg)（翻转显示背面）

	// 获取DOM元素
	let card = document.querySelector('.card');  // 获取卡片元素
	let flip = document.querySelector('.flip');  // 获取翻转按钮元素
	
	// 为翻转按钮添加点击事件监听器
	flip.addEventListener('click', function() {
		// 条件判断：如果卡片当前有transform样式，则清除（恢复正面）
		// 如果卡片当前没有transform样式，则添加翻转样式（显示背面）
		card.style.transform ? card.style.transform = '' : card.style.transform = 'rotateY(180deg)';
	});