我如何创建 svg 框打开动画？

Question

看起来"broken"。正确元素的变换原点不合适。我正在尝试制作这个盒子 "solid"，但它散落了。

http://codepen.io/HappyHarlequin/pen/bZWQro

svg:hover #right{
    animation: open_right 1s linear infinite;
  animation-direction: alternate;
}
svg:hover #left{
  transform-origin: 0% 50%;
    animation: open_left 1s linear infinite;
  animation-direction: alternate;
}
@keyframes open_right{
  0% {

  }

  100% {
    transform-origin:100% 50%;
    transform: rotate(230deg) rotateX(-230deg)

  }

}

@keyframes open_left{
  0% {

  }

  100% {
   transform-origin: 0% 50%;
   transform: rotate(-230deg) rotateX(230deg)

  }

}

Answer 1

rotateX() 是 3D 旋转，您不能对 SVG 内的元素进行 3D 变换。您只能对它们应用二维变换（仅在 X 和 Y 中旋转、缩放、平移等）

即使您可以进行 3D 变换，您也在尝试将 3D 变换应用于绘制成看起来像 3D 的二维形状。所以无论如何都行不通。

可能的方法

你可以：

坚持使用 2D 并使用关键帧动画为您的盒子襟翼设置动画。绘制襟翼打开时的一系列关键帧。然后在这些形状之间步进或变形。
将襟翼更改为 HTML 元素，例如 <div>。然后定位它们，使它们与您的假 3D 框对齐并具有适当的视角。然后你可以对它们应用 3D 旋转。
切换到适当的 3D 框并为其设置动画。有各种 JS 库可以帮助您，例如 three.js.

我如何创建 svg 框打开动画？

How do i create svg box opening animation?

svg

css-transforms

css-animations