css动画中心点

灵活性: 允许开发者自定义动画的中心点，可以实现更加复杂和自然的动画效果。
精确控制: 可以精确控制元素在动画过程中的位置变化。

CSS 动画中心点是指在进行 CSS 动画时，元素旋转、缩放等变换的基准点。这个中心点默认位于元素的左上角（即坐标原点），但可以通过 CSS 属性 transform-origin 来改变。

基础概念

transform-origin: 该属性用于设置元素变换的原点。它可以接受两个值，分别表示 x 轴和 y 轴的位置。这些值可以是像素值、百分比或者关键词（如 center）。

类型

关键词: 如 left, right, top, bottom, center 等。
长度值: 如 px, em, rem 等。
百分比: 相对于元素自身的宽度和高度。

应用场景

旋转动画: 当需要元素围绕非默认中心点旋转时，可以设置 transform-origin。
缩放动画: 在进行元素的缩放动画时，可以通过改变中心点来控制缩放的效果。
倾斜动画: 类似于旋转，改变中心点可以创造出不同的倾斜效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transform Origin Example</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 50px;
    animation: rotate 2s linear infinite;
    transform-origin: center center;
  }

  @keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .box-top-left {
    transform-origin: top left;
  }

  .box-bottom-right {
    transform-origin: bottom right;
  }
</style>
</head>
<body>
<div class="box"></div>
<div class="box box-top-left"></div>
<div class="box box-bottom-right"></div>
</body>
</html>