perspective（）の問題はパースペクティブで修正されましたか？

Question

私は視点を使用していた私はフリップアニメーションを持っていた、私はぶら下げられたときに反転するシンプルなカードを持っています。私の理解から、perspectiveプロパティとtransformプロパティperspective（）は、perspectiveがparentに適用され、その子にレンダリングされ、perspective（）がperspectiveを持ちたい要素に直接適用される以外は同じですが、これは正しいですか？最初にperspectiveプロパティを使用し、perspective（）を使用してコードを少し簡略化して変更したことに気付きました。 perspective（）を使用すると、アニメーションが機能しますが、アニメーションが開始される前にマウスを離したり動かしたりすると、奇妙な結果が得られます。カードの裏面は前面に表示されますカードが画面を横切って伸びると、私はカードにパースペクティブプロパティを持つ親を与え、パースペクティブ（）を削除するとこの奇妙な振る舞いが止まるので、これはブラウザのエラーですか、または違いを正しく理解していないか、パースペクティブ（）で使用する必要がある他のプロパティ

結果のCSSの2つのバージョン

パースペクティブ：1000px; https://fiddle.jshell.net/rqzwoguw/28/

transform：perspective（1000px）; https://fiddle.jshell.net/rqzwoguw/29/ //トランジションの開始点または中間点でマウスをオン/オフします。

Answer 1

pespectiveを一定に保ちます。ホバー上で変更しないでください。

だけ.cardに追加ません：（無回転をしていますが、ホバーに設定されているのと同じpespective）

transform: perspective(1000px) rotateY(0deg); 

.front, 
 
.back, 
 
.card { 
 
    width: 100px; 
 
    height: 170px; 
 
    border-radius: 10px; 
 
    text-align: center; 
 
} 
 

 
.card { 
 
    position: relative; 
 
    transition: transform 1s ease-in-out 0s; 
 
    transform-style: preserve-3d; 
 
    transform-origin: right; 
 
    transform: perspective(1000px) rotateY(0deg); 
 
} 
 

 
.card:hover { 
 
    transform: perspective(1000px) rotateY(180deg); 
 
} 
 

 
.front { 
 
    background-color: red; 
 
} 
 

 
.back { 
 
    background-color: blue; 
 
    transform: rotateY(180deg); 
 
    position: absolute; 
 
    top: 0px; 
 
    z-index: -1; 
 
}

<div class="card"> 
 
    <div class="front"> 
 
    FRONT 
 
    </div> 
 
    <div class="back"> 
 
    BACK 
 
    </div> 
 
</div>