transform:scale()で要素が重なったときの対処法

by bc_rikko

HTML

<h1>Original</h1>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>

<h1>Scale</h1>
<div class="container scaled">
<div class="box">scale(1)</div>
<div class="box">scale(1.3)</div>
<div class="box">scale(1.5)</div>
<div class="box">scale(1.3)</div>
<div class="box">scale(1)</div>
</div>

<h1>Adjust</h1>
<div class="container margined">
<div class="box">scale(1)</div>
<div class="box">scale(1.3)</div>
<div class="box">scale(1.5)</div>
<div class="box">scale(1.3)</div>
<div class="box">scale(1)</div>
</div>

SCSS

* {
	box-sizing: border-box;
}

body {
	margin: 0 50px;
}

.container~h1 {
	margin-top: 50px;
}

.box {
	display: inline-block;
	width: 100px;
	height: 100px;
	border: 2px solid;
	transform-origin: top left;
}

.scaled {
	>.box:nth-child(1) {
		transform: scale(1);
	}
	>.box:nth-child(2) {
		transform: scale(1.3);
	}
	>.box:nth-child(3) {
		transform: scale(1.5);
	}
	>.box:nth-child(4) {
		transform: scale(1.3);
	}
	>.box:nth-child(5) {
		transform: scale(1);
	}
}

.margined {
	>.box:nth-child(1) {
		transform: scale(1);
	}
	>.box:nth-child(2) {
		transform: scale(1.3);
		margin-right: 30px;
		margin-bottom: 30px;
	}
	>.box:nth-child(3) {
		transform: scale(1.5);
		margin-right: 50px;
		margin-bottom: 50px;
	}
	>.box:nth-child(4) {
		transform: scale(1.3);
		margin-right: 30px;
		margin-bottom: 30px;
	}
	>.box:nth-child(5) {
		transform: scale(1);
	}
}