css卡片悬浮翻转特效

css卡片悬浮翻转特效

<div class=“content”>
	<div class=“card”>
		<div class=“cardside cardside–front”>
			<div class=“cardcont”>alert(‘Hello World!’)</div>
		</div>
		<div class=“cardside cardside–back”>
			<div class=“cardcta”>
				<p>console.log(‘Hello World!’)</p>
			</div>
		</div>
	</div>
</div>
<style>
	body {
		background-image: linear-gradient(to bottom right, #ff9800, #ffa726);
	}
	.content{
		height: 100vh;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
	.card {
		-webkit-perspective: 150rem;
		perspective: 150rem;
		height: 20rem;
		width: 30rem;
		position: relative;
	}
	.cardside {
		height: 15rem;
		transition: all 0.8s ease;
		position: absolute;
		top: 0;
		left: 0;
		margin: auto;
		width: 30rem;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		border-radius: 3px;
		overflow: hidden;
		box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
	}
	.cardside–front {
		background-color: #1c1c1c;
	}
	.cardside–back {
		-webkit-transform: rotateY(180deg);
		transform: rotateY(180deg);
		background-color: #1c1c1c;
	}
	.card:hover .cardside–front {
		-webkit-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}
	.card:hover .cardside–back {
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
	.cardcont {
		height: 15rem;
		background-color: #1c1c1c;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cardcta {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 90%;
		color: white;
	}
	.cardcta p {
		margin-left: 1rem;
	}
	.card__cta p>.space {
		margin-left: 2rem;
	}
</style>