CSS 3Dアイソメトリックシンプルローテーション変換

Question

私は、折りたたみアニメーションのようなdoorの小さなCSSアニメーションを作成しようとしています。 SVGを基底として使用し、等尺変換を行い、オレンジ色の四角形を3次元空間のように折りたたんでください。

私は遠近法で、歪曲して、3Dを変換しようとしましたが失敗しました。

#svgbox { 
 
    position: absolute; 
 
    transform: rotate(-45deg) skew(15deg, 15deg); 
 
    left: 200px; 
 
} 
 
#rect5 { 
 
    animation: rect5anim 3s ease forwards; 
 
    transform-origin: 0% 50%; 
 
    perspective: 1500px; 
 
    /*transform-style: preserve-3d;*/ 
 
} 
 
@keyframes rect5anim { 
 
    0% { 
 
    transform: rotateY(0deg); 
 
    } 
 
    100% { 
 
    transform: rotateY(-180deg); 
 
    } 
 
}

<div id="svgbox"> 
 
    <svg viewBox="0 0 1200 1200" width="400" height="400" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
     <linearGradient x1="123.587715%" y1="49.9380835%" x2="24.1186732%" y2="49.9380835%" id="linearGradient-1" gradientTransform="rotate(45)"> 
 
     <stop stop-color="#F6851F" offset="0%"></stop> 
 
     <stop stop-color="#F59427" offset="28.32%"></stop> 
 
     <stop stop-color="#F5BB42" offset="100%"></stop> 
 
     </linearGradient> 
 
     <linearGradient x1="126.190394%" y1="50.060688%" x2="22.2418719%" y2="50.060688%" id="linearGradient-2" gradientTransform="rotate(45)"> 
 
     <stop stop-color="#F6851F" offset="0%"></stop> 
 
     <stop stop-color="#F5BB42" offset="100%"></stop> 
 
     </linearGradient> 
 
     <linearGradient x1="122.778325%" y1="50.0081081%" x2="24.5036946%" y2="50.0081081%" id="linearGradient-3" gradientTransform="rotate(45)"> 
 
     <stop stop-color="#8CC151" offset="0%"></stop> 
 
     <stop stop-color="#98C54C" offset="14.59%"></stop> 
 
     <stop stop-color="#D7DF23" offset="99%"></stop> 
 
     </linearGradient> 
 
     <linearGradient x1="-27.65086%" y1="50.0081081%" x2="72.4520885%" y2="50.0081081%" id="linearGradient-4" gradientTransform="rotate(45)"> 
 
     <stop stop-color="#8CC151" offset="0%"></stop> 
 
     <stop stop-color="#D7DF23" offset="99%"></stop> 
 
     </linearGradient> 
 
    </defs> 
 
    <g> 
 
     <rect id="rect1" width="200" height="200" fill="url(#linearGradient-1)" /> 
 
     <rect id="rect2" x="201" width="200" height="200" fill="url(#linearGradient-1)" /> 
 
     <rect id="rect3" x="401" width="200" height="200" fill="url(#linearGradient-2)" /> 
 
     <rect id="rect4" x="601" width="200" height="200" fill="url(#linearGradient-2)" /> 
 
     <rect id="rect5" x="801" width="200" height="200" fill="url(#linearGradient-2)" /> 
 

 
     <rect id="rect6" y="201" width="200" height="200" fill="url(#linearGradient-3)" /> 
 
     <rect id="rect7" y="401" width="200" height="200" fill="url(#linearGradient-4)" /> 
 
     <rect id="rect8" y="601" width="200" height="200" fill="url(#linearGradient-4)" /> 
 
    </g> 
 
    </svg> 
 
</div>

Answer 1

あなたがperspectiveプロパティを使用して変換（transform: perspective(x)）に視点を適用していないため、問題があります。 perspectiveプロパティは、要素のレンダリングには影響しません。子どもが使用する3D空間を作成するだけです。詳細についてはthis CSS Tricks Articleをご覧ください。

もう1つ注目すべきことは、transform-originのパーセンテージ値がFirefoxでうまく機能していないようです。それはpxベースの値を必要とし、それもSVG（0,0）を参照するべきです。したがって、#rect5の場合、transform-origin: 801px 100pxを設定すると、FFで期待される出力が生成されます。 This CSS Tricks Articleには、この特定の問題に関する詳細情報があります。

以下は、必要な効果を生み出すために、透視投影で変換を使用するスニペットです。

#svgbox { 
 
    position: absolute; 
 
    transform: rotate(-45deg) skew(15deg, 15deg); 
 
    left: 200px; 
 
} 
 
#rect5 { 
 
    animation: rect5anim 3s ease forwards; 
 
    transform-origin: 801px 100px; 
 
    transform-style: preserve-3d; 
 
} 
 
@keyframes rect5anim { 
 
    0% { 
 
    transform: perspective(1000px) rotateY(0deg); 
 
    } 
 
    100% { 
 
    transform: perspective(1000px) rotateY(180deg); 
 
    } 
 
}

<div id="svgbox"> 
 
    <svg viewBox="0 0 1200 1200" width="400" height="400" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
     <linearGradient x1="123.587715%" y1="49.9380835%" x2="24.1186732%" y2="49.9380835%" id="linearGradient-1" gradientTransform="rotate(45)"> 
 
     <stop stop-color="#F6851F" offset="0%"></stop> 
 
     <stop stop-color="#F59427" offset="28.32%"></stop> 
 
     <stop stop-color="#F5BB42" offset="100%"></stop> 
 
     </linearGradient> 
 
     <linearGradient x1="126.190394%" y1="50.060688%" x2="22.2418719%" y2="50.060688%" id="linearGradient-2" gradientTransform="rotate(45)"> 
 
     <stop stop-color="#F6851F" offset="0%"></stop> 
 
     <stop stop-color="#F5BB42" offset="100%"></stop> 
 
     </linearGradient> 
 
     <linearGradient x1="122.778325%" y1="50.0081081%" x2="24.5036946%" y2="50.0081081%" id="linearGradient-3" gradientTransform="rotate(45)"> 
 
     <stop stop-color="#8CC151" offset="0%"></stop> 
 
     <stop stop-color="#98C54C" offset="14.59%"></stop> 
 
     <stop stop-color="#D7DF23" offset="99%"></stop> 
 
     </linearGradient> 
 
     <linearGradient x1="-27.65086%" y1="50.0081081%" x2="72.4520885%" y2="50.0081081%" id="linearGradient-4" gradientTransform="rotate(45)"> 
 
     <stop stop-color="#8CC151" offset="0%"></stop> 
 
     <stop stop-color="#D7DF23" offset="99%"></stop> 
 
     </linearGradient> 
 
    </defs> 
 
    <g> 
 
     <rect id="rect1" width="200" height="200" fill="url(#linearGradient-1)" /> 
 
     <rect id="rect2" x="201" width="200" height="200" fill="url(#linearGradient-1)" /> 
 
     <rect id="rect3" x="401" width="200" height="200" fill="url(#linearGradient-2)" /> 
 
     <rect id="rect4" x="601" width="200" height="200" fill="url(#linearGradient-2)" /> 
 
     <rect id="rect5" x="801" width="200" height="200" fill="url(#linearGradient-2)" /> 
 

 
     <rect id="rect6" y="201" width="200" height="200" fill="url(#linearGradient-3)" /> 
 
     <rect id="rect7" y="401" width="200" height="200" fill="url(#linearGradient-4)" /> 
 
     <rect id="rect8" y="601" width="200" height="200" fill="url(#linearGradient-4)" /> 
 
    </g> 
 
    </svg> 
 
</div>