どのように私はsvgボックスオープニングアニメーションを作成するのですか？

Question

"壊れている"ようです。右の要素の変換起点が適切ではありません。私はこの箱を "固体"にしようとしていますが、それは散在しています。

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変換を行うことはできません。

3D変換を行うことができたとしても、2次元形状であるものに3D変換を適用しようとしています（X、Yのみで回転、拡大縮小、平行移動など） 3Dのように描かれています。とにかくうまくいかないでしょう。

可能性は、あなたは

を可能性が近づい：

1. 2Dに固執し、あなたの箱のフラップをアニメーション化するキーフレームアニメーションを使用します。開いたときにフラップの一連のキーフレームを描画します。その後、それらの形の間にステップまたはモーフィングします。

2. フラップをHTML要素に変更します（<div>など）。次に、偽の3Dボックスと一直線に並び、適切な視点を持つように配置します。その後、それらに3D回転を適用することができます。

3. 適切な3Dボックスに切り替え、それをアニメーションします。 three.jsのような、あなたに役立つさまざまなJSライブラリがあります。