Question

我有以下jsfiddle：

我无法弄清楚如何将这个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值，看看会发生什么;）

原来订单确实很重要。如果你考虑一下，它确实有意义：

旋转＆gt;比例＆gt;翻译

旋转后，原点也会旋转。这就是为什么你的广场从原点“向左”和“向上”移动的原因。

翻译＆gt;旋转＆gt;规模

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

Answer 2

使用CSS transform-origin: 50% 50%或尝试"classpath 'com.google.gms:google-services:1.3.0-beta1'"。 ~~首先删除0 0。~~

这是0 0

这是50% 50%

这是45% -290%居中？

是的，看起来以我为中心，请看完整页。无论如何，从其他答案中可以看出position: absolute是最好的解决方案。斯科特建议删除transform-origin，如果你想让div居中在第一位，那就很有意义了，但如果你想在那里仍然存在并将它作为一个矩形中心（高度小于宽度），然后45％-290％。

段

transform: -50% -50%

.box {
  position: relative;
}
.center {
  transform: rotate(-45deg) scale(2) translate(-50%, -50%);
  transform-origin: 45% -290%;
  opacity: 1 !important;
  width: 200px;
  height: 200px;
  background: black;
  position: absolute;
}

Answer 3

您可以删除>>> h.append(1000) >>> id(h) 139753623282464 # same as above!

＆＃13;

translate(50%, 50%);

＆＃13;

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

＆＃13;

Fiddle

或添加<div></div>以开始左上角的转换。

＆＃13;

transform-origin: 0 0;

＆＃13;

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

＆＃13;

Fiddle

Answer 4

使用transform-origin可以获得结果，也可以在定位之前进行缩放和旋转。

div {
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(2) translate(-50%, 50%);
  opacity: 1 !important;
  width: 100px;
  height: 100px;
  background: black;
}

<div></div>

jsfiddle：https://jsfiddle.net/quacu0hv/8/

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

4 个答案:

段