【CSS案例】鼠标翻牌

【CSS案例】鼠标翻牌1-抽卡

<div class="container">
	<div class="card" style="--i:-4;">1</div>
	<div class="card" style="--i:-3;">2</div>
	<div class="card" style="--i:-2;">3</div>
	<div class="card" style="--i:-1;">4</div>
	<div class="card" style="--i:0;">5</div>
	<div class="card" style="--i:1;">6</div>
	<div class="card" style="--i:2;">7</div>
	<div class="card" style="--i:3;">8</div>
	<div class="card" style="--i:4;">9</div>
</div>

CSS代码

.container {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container .card {
	position: absolute;
	width: 240px;
	height: 360px;
	background-color: #5E5CFC;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgba(0, 0, 0, 0);
	font-size: 8em;
	font-weight: bolder;
	border: 10px solid rgba(0, 0, 0, .1);
	transition: .5s;
	filter: hue-rotate(calc(var(--i) * 30deg));
	box-shadow: 0 15px 50px rgba(0, 0, 0, .1);
}
/** 摊牌 */
.container:hover .card {
	transform: rotate(calc(var(--i) * 5deg)) translate(calc(var(--i) * 120px), -50px);
	box-shadow: 0 15px 50px rgba(0, 0, 0, .25);
	color: rgba(0, 0, 0, .25);
	cursor: pointer;
}
/** 弹出被点中的牌 */
.container .card:active {
	translate: calc(var(--i) * 20px) -50px;
	z-index: 2;
}
/** 排除被点中的牌 */
.container:active .card:not(:active) {
	background-color: #333;
}

【CSS案例】鼠标翻牌2-抖动

HTML代码

<img class="card" src="test.png">

CSS代码

img {
	transform: perspective(500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: 0.3s;
}

JS代码

const card = document.querySelector('.card');
/** 翻转范围 */
const yRange = [-20, 20];
/** 计算翻转角度 */
function getRoateDeg(range, value, length) {
	return (value / length) * (range[1] - range[0]) + range[0]
}
card.onmousemove = (e) => {
	const {offsetX, offsetY} = e;
	const {offsetWidth, offsetHeight} = card;
	const ry = -getRoateDeg(yRange, offsetX, offsetWidth)
	const rx = getRoateDeg(yRange, offsetY, offsetHeight)

	card.style.setProperty('--rx', rx + 'deg')
	card.style.setProperty('--ry', ry + 'deg')
};
card.onmouseleave = () => {
	card.style.setProperty('--rx', 0)
	card.style.setProperty('--ry', 0)
};