视角（）问题与视角固定？

我有一个翻盖动画是我使用的角度来看，我有一个简单的卡片翻转时，徘徊。从我的理解来看，透视属性和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

视角（）问题与视角固定？

回答

相关问题