我无法在 CSS 中放置 div 而不弄乱动画

Question

我尝试制作一个旋转正方形，旋转 180 度时会变成椭圆形，我遇到的问题是当正方形旋转时它向左移动，因此左上角始终保持不变。 Visualization of the problem。我认为这是由于我的动画改变了正方形的宽度造成的：

`@keyframes squarestuff {
  50% {
    transform: rotate(180deg);
    width: 5rem;
    border-radius: 50%;
  }`

Answer 1

尝试添加这个

@keyframes squarestuff {
  50% {
    transform: rotate(180deg);
    width: 5rem;
    border-radius: 50%;
    transform-origin:center center;
  }

因为它变换了中心并围绕新的中心旋转。使 div 的宽度包含正方形作为正方形的宽度，如果仍然存在问题

Answer 2

就是这样： https://jsfiddle.net/0pz1tv7q/

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

div {
  height: 100px;
  width: 100px;
  border: 5px solid black;
  background: red;
  position: absolute;
  animation: mymove 5s;
  animation-fill-mode: forwards;
}

@keyframes mymove {
    100% {
    transform: rotate(180deg);
    width: 25%;
    border-radius: 50%;
  }
}
</style>
</head>
<body>

<h2>Square CSS</h2>
<div></div>

</body>
</html>

Answer 3

假设您希望椭圆的中心保持在 'square' 的中心（即不移动），那么您可以使用变换比例而不是更改宽度。

此代码段旋转正方形，其中心始终位于同一位置，并将椭圆添加为伪元素，这样您就可以看到发生了什么，并且中心不会移动：

div {
  width: 10rem;
  height: 10rem;
  background-color: magenta;
  animation: squarestuff 5s linear infinite;
  transform-origin: center center;
  position: relative;
}

@keyframes squarestuff {
  50% {
    transform: rotate(180deg);
  }
}

div::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1, 1);
  background: blue;
  width: 10rem;
  height: 10rem;
  animation: square2oval 5s linear infinite;
  z-index: 1;
  display: inline-block;
}

@keyframes square2oval {
  50% {
    transform: translate(-50%, -50%) scale(0.5, 1);
    border-radius: 50%;
  }
}

<div></div>

我无法在 CSS 中放置 div 而不弄乱动画

I can't position a div in CSS without it messing up the animation

html

css

css-animations