我试图让人体模型旋转 360 度,但是每当我将鼠标悬停在其中时,人体模型只会旋转“前”>“左”>“后”,然后“右”就不见了。请帮忙!我想我在这里漏掉了什么。
CSS:
.flip3D{ width:240px; height:200px; margin:10px; float:left; }
.flip3D > .front{
position: absolute;
transform: rotateY( 0deg );
backface-visibility: hidden;
transition: transform 5s linear 1s; }
.flip3D > .left{
position: absolute;
transform: rotateY( 90deg );
backface-visibility: hidden;
transition: transform 5s linear 1s; }
.flip3D > .back{
position: absolute;
transform: rotateY( 180deg );
backface-visibility: hidden;
transition: transform 5s linear 1s; }
.flip3D > .right{
position: absolute;
transform: rotateY( 270deg );
backface-visibility: hidden;
transition: transform 5s linear 1s; }
.flip3D:hover > .front{
transform: rotateY( -180deg );
}
.flip3D:hover > .left{
transform: rotateY( -90deg );
}
.flip3D:hover > .back{
transform: rotateY( 0deg );
}
.flip3D:hover > .right{
transform: rotateY( 90deg );
}
谢谢! :)
编辑:
这是 HTML:
<div class="flip3D">
<div class="front"><img src="http://i.imgur.com/B7sC8PO.png"></div>
<div class="left"><img src="http://i.imgur.com/WBL420n.png"></div>
<div class="back"><img src="http://i.imgur.com/iP4o59F.png"></div>
<div class="right"><img src="http://i.imgur.com/9TDxCLU.png"></div>
< /div>
最佳答案
这有点靠不住,但我认为这是正确的想法。 Demo .
对于演示,我只是让容器不断旋转。你可以很容易地调整它以在悬停时工作。我没有在容器悬停时旋转每一侧,而是预先旋转它们。然后,我将 360 度旋转应用于容器本身,因此在 5 秒的旋转过程中会显示每一面。
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(-360deg); }
}
.flip3D {
width:240px;
height:200px;
margin:10px auto;
transform-style: preserve-3d;
animation: spin 5s infinite linear;
}
.flip3D > div {
position: absolute;
backface-visibility: hidden;
}
.flip3D > .front {
transform: rotateY(0deg);
}
.flip3D > .back {
transform: rotateY(180deg);
}
.flip3D > .right {
transform: rotateY(-270deg);
}
.flip3D > .left {
transform: rotateY(270deg);
}
关于HTML/CSS : flip3d how to do a 360 degrees with 4 pictures,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36734194/