transform-origin,多个动画放一起执行

/* 旋转 */
div:nth-of-type(3):active {
	/* 设置旋转轴心origin：
	 1.x,y
	 2.关键字：left，top，right，bottom，center*/
	/* transform-origin: right top;
	transform:rotate(150deg); */
}
div:nth-of-type(3):active {
	/* transform:rotate(150deg); */
	/* 同时添加多个transform属性，中间用空格分割，旋转会将当前的坐标系也旋转了。 */
	/* 建议先添加移动，再添加旋转效果。 */
	transform:rotate(-150deg) scale(0.5);
}

origin：扑克牌，实现散开酷炫效果

盾牌九宫格效果例子：