Wie kann ich svg Box öffnen Animation erstellen?

Question

Es sieht „gebrochen“. Transform Ursprung des richtigen Elements ist fehl am Platz. Ich versuche, diese Box "solide" zu machen, aber sie streut.

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() ist eine Rotation 3D und Sie können 3D-Transformationen auf Elemente innerhalb eines SVG nicht. Sie können nur zweidimensionale Transformationen auf sie anwenden (Drehen, Skalieren, Übersetzen usw. nur in X und Y)

Auch wenn Sie 3D-Transformationen durchführen könnten, versuchen Sie, eine 3D-Transformation auf eine zweidimensionale Form anzuwenden gezeichnet, um wie es aussieht 3D zu sein. Also würde es sowieso nicht funktionieren.

Mögliche Ansätze

Sie könnten:

1. -Stick mit 2D- und verwenden Keyframe-Animation Ihre Box Klappen zu animieren. Zeichnen Sie eine Reihe von Keyframes Ihrer Klappen beim Öffnen. Dann treten Sie zwischen diese Formen, oder verwandeln Sie sie.

2. Ihre Klappen ändern HTML-Elemente zu sein, wie ein <div>. Platziere sie dann so, dass sie mit deiner gefälschten 3D-Box übereinstimmen und die richtige Perspektive haben. Dann können Sie eine 3D-Rotation auf diese anwenden.

3. Wechseln Sie zu einem richtigen 3D-Box und animieren das. Es gibt verschiedene JS-Bibliotheken, die Sie mit dem, wie three.js helfen kann.