マウスホバーで裏返るCSSジェネレーター

<div class="flip-card">
	<div class="front">{{front_text}}</div>
	<div class="back">{{back_text}}</div>
</div>

.flip-card {
	position: relative;
	width: {{width}}px;
	height: {{height}}px;
	transform-style: preserve-3d;
	transition: {{duration}}s;
}

.flip-card:hover {
	transform: {{transform_val}};
}

.flip-card div {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: {{font_size}}px;
	border-radius: 10px; /* Optional: 角丸 */
}

.front {
	background: {{front_bg}};
	color: {{front_color}};
	z-index: 2;
}

.back {
	background: {{back_bg}};
	color: {{back_color}};
	transform: {{transform_val}};
}