HTML/CSS : flip3d how to do a 360 degrees with 4 pictures

Question

我试图让人体模型旋转 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>

Answer 1

这有点靠不住，但我认为这是正确的想法。 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);
}