CSSのtransformを複数使用する

transformを複数使用したい場面に遭遇したので、調べた方法をメモしておきます。

サンプル

translateとscaleを一緒に指定してみます。

HTML

<div id="sample"></div>

CSS

#sample {
	position: relative;
	width: 200px;
	height: 150px;
	background: #3498DB;
}
#sample:after {
	content: url("icon.png");
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.5);
}

半角スペースを空けて指定すればいいようです。
transformを複数使用するデモページ
　

【参考サイト】

• CSSでトランスフォーム：1つの要素に複数の変形処理を適用する – builder by ZDNet Japan