Question

我正试图让人体模型旋转360度，但每当我将鼠标悬停在其中时，人体模型只会旋转“前方”＆gt; “左”＆gt; “回”然后“右”失踪了。请帮忙！我想我在这里错过了什么。

CSS：

{
    "errorCode": "custom_404",
    "errorMessage": "message for 404 error code"
}

谢谢！：）

修改

以下是 HTML ：

.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 );
}

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);
}

Answer 2

非常感谢你的所有建议和答案。因此，不是将我的鼠标悬停在图像上来旋转它，而是我来到这里：

的 SCRIPT：

<body onload="myFunctionLeft('id1','id2','id3','id4');"> <button onclick="myFunctionLeft('id1','id2','id3','id4')" type="btnLeft">Left!</button> <button onclick="myFunctionRight('id1','id2','id3','id4')" type="btnRight">Right!</button> <p id="demo"></p> <div id="id1"><img src="http://i.imgur.com/B7sC8PO.png"></div> <div id="id2"><img src="http://i.imgur.com/9TDxCLU.png"></div> <div id="id3"><img src="http://i.imgur.com/iP4o59F.png"></div> <div id="id4"><img src="http://i.imgur.com/WBL420n.png"></div>

的 HTML：

List<TestModel> list = ((IEnumerable)data).OfType<TestModel>().ToList();

HTML / CSS：flip3d如何用4张图片做360度

2 个答案: