視角（）問題與視角固定？

我有一個翻蓋動畫是我使用的角度來看，我有一個簡單的卡片翻轉時，徘徊。從我的理解來看，透視屬性和transform屬性透視圖（）是相同的，除了透視圖應用於父視圖並呈現在其子視圖上並且透視圖（）直接應用於要透視的元素，這是否正確？我首先使用透視屬性，然後意識到我可以通過使用perspective（）稍微簡化我的代碼，所以我改變了它。使用透視圖（），如果將鼠標懸停在卡片上，則動畫可以正常工作，但如果在動畫開始時動畫結束之前將鼠標移開並重新打開，則會得到一些奇怪的結果，卡片的背面將顯示在前面並且卡片將在屏幕上延伸，當我給該卡片添加透視屬性並刪除透視圖（）時，所有這些奇怪的行爲都會停止，那麼這是瀏覽器錯誤還是我沒有正確理解差異或是否存在我需要使用透視（）我不知道的其他屬性？視角（）問題與視角固定？

兩個版本的css結果

perspective：1000px; https://fiddle.jshell.net/rqzwoguw/28/

transform：perspective（1000px）; https://fiddle.jshell.net/rqzwoguw/29/ //在過渡的開始或中點處開啓和關閉鼠標。

來源

2017-05-27 alexis

保持恆定，不要在懸停時更改它。

只需添加到.card：（沒有旋轉，但你在懸停設置相同的兩英）

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>

來源

2017-05-28 19:43:07 vals

視角（）問題與視角固定？

回答

相關問題