屏幕上的中心div已旋转并使用css3缩放

Question

我有以下jsfiddle:

https://jsfiddle.net/quacu0hv/

我无法弄清楚如何使这个div居中.它旋转的事实使得很难将对象实际放在屏幕上.如何用纯css实现这一目标？我想象它是由于原点改变了它的位置(div的左上顶点).

div {
  transform: rotate(-45deg) scale(2) translate(-50%, -50%);
  opacity: 1 !important;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  background: black;
  position: absolute;
}

Answer 1

尝试重新排列transform值,看看会发生什么;)

原来订单确实很重要.如果你考虑一下,它确实有意义:

旋转>缩放>平移

旋转后,原点也会旋转.这就是为什么你的方块从原点"向左"和"向上"移动的原因.

翻译>旋转>缩放

这就是你想要做的.在进行任何可能影响原点的其他调整之前的位置.