HTML/CSS: 演示如何使用4张图片完成360度翻转（flip3d）。

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>

- Alexa

---

这是我制作的唯一HTML结构：<div class="flip3D"> <div class="front"><img src="front.png"></div> <div class="left"><img src="left.png"></div> <div class="back"><img src="back.png"></div> <div class="right"><img src="right.png"></div> </div> </div> - Alexa

@DorineMae 没有图片，很难帮助你。你能提供模特图片的链接吗？ - Andy Hoffman

哦，对不起。我会上传它的。 - Alexa

末尾多了一个div？请移除那个多余的div。谢谢。 - Leo the lion

@Dorine，有什么进展吗？ - Andy Hoffman

Answer 1

这个想法有点奇怪，但我认为这是正确的想法。Demo链接在此：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);
}

- Andy Hoffman

---

谢谢，我会尝试的 :) - Alexa

Answer 2

非常感谢您提供的所有建议和答案。因此，为了不用将鼠标悬停在图像上就能旋转它，我做了以下操作：

脚本：

varSide = 0
document.getElementById("demo").innerHTML = varSide; 

function myFunctionLeft(id1,id2,id3,id4) {
    var a = document.getElementById(id1);
    var b = document.getElementById(id2);
    var c = document.getElementById(id3);
    var d = document.getElementById(id4);

        if (varSide==0){
        varSide = -1;
        a.style.display = 'block';
        b.style.display = 'none';
        c.style.display = 'none';
        d.style.display = 'none';
    }
    else if (varSide==-1){
        varSide = 2;
        a.style.display = 'none';
        b.style.display = 'none';
        c.style.display = 'none';
        d.style.display = 'block';
    }
    else if (varSide==2){
        varSide = 1;
        a.style.display = 'none';
        b.style.display = 'none';
        c.style.display = 'block';
        d.style.display = 'none';
    }
    else{
        varSide = 0;
        a.style.display = 'none';
        b.style.display = 'block';
        c.style.display = 'none';
        d.style.display = 'none';
    }
    document.getElementById("demo").innerHTML = varSide; 
}   

function myFunctionRight(id1,id2,id3,id4) {
    var a = document.getElementById(id1);
    var b = document.getElementById(id2);
    var c = document.getElementById(id3);
    var d = document.getElementById(id4);

        if (varSide==0){
        varSide = 1;
        a.style.display = 'none';
        b.style.display = 'none';
        c.style.display = 'block';
        d.style.display = 'none';
    }
    else if (varSide==1){
        varSide = 2;
        a.style.display = 'none';
        b.style.display = 'none';
        c.style.display = 'none';
        d.style.display = 'block';
    }
    else if (varSide==2){
        varSide = -1;
        a.style.display = 'block';
        b.style.display = 'none';
        c.style.display = 'none';
        d.style.display = 'none';
    }
    else{
        varSide = 0;
        a.style.display = 'none';
        b.style.display = 'block';
        c.style.display = 'none';
        d.style.display = 'none';
    }

    document.getElementById("demo").innerHTML = varSide; 
    }

抱歉，您没有提供需要翻译的英文文本。

<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>

- Alexa