如何创建 svg 框打开动画？

【问题标题】：How do i create svg box opening animation?如何创建 svg 框打开动画？
【发布时间】：2016-11-04 16:16:25
【问题描述】：

它看起来“坏了”。正确元素的变换原点不合适。我试图让这个盒子“实心”，但它分散了。

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)

  }

}

【问题讨论】：

标签： svg css-animations css-transforms

【解决方案1】：

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

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

可能的方法

你可以：

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

【讨论】：