问题：

超文本标记语言/CSS： flip3d如何用4张图片做360度

彭涵衍

2023-03-14

我试图让一个人体模型在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 );
}

谢谢顺便！：）

编辑：

以下是超文本标记语言：

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

共有2个答案

岑畅

2023-03-14

非常感谢你们的建议和回答。因此，我没有将鼠标悬停在图像上旋转它，而是得出以下结论：脚本：

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

HTML：

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

李博达

2023-03-14

这有点不靠谱，但我认为这是正确的想法。演示。

对于演示，我只是让容器不断旋转。你可以很容易地调整它，使其适用于悬停。我没有旋转容器悬停时的每一侧，而是预先旋转它们。然后，我将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);
}

类似资料：

如何做"超文本标记语言FORM action=location.replace（'nextpage.html'）"？

这个头衔实际上是我实现目标的失败尝试。具体来说，我想1。从main转到页面。html（例如，到page1.html） 2。在第1页的表单中收集数据 3。提交时，转到第2页。html（它使用PHP将数据保存到数据库并宣布结果） 4。单击“确定”并返回主菜单页<似乎很合理，对吧？上面的第4步是我的问题。我尝试过的事情： 1.在page2中的Ok单击调用history.back。这将转到page1
如何包装文本在超文本标记语言前标记？

我试图在HTML的pre标签中包装文本，但它不起作用。我使用下面的CSS作为我的标签。我从如何在pre标记中换行文本？我已添加
用REST检查超文本标记语言文档

我正在尝试使用放心来检查服务器返回的HTML文档的一些属性。演示该问题的SSCCE如下所示: 现在，此尝试以，这是由所有可能的错误大约 30 秒左右后超时！如果我用< code>xmlPathConfig()删除这一行。用()。功能(...)当特性“http://Apache . org/XML/features/disallow-DOCTYPE-decl”设置为true时，由于< code>D
超文本标记语言解析使用JSoupJava

对于上面的html内容，我如何使用Jsoup解析并获取文本当我使用我得到了这样的东西
如何在超文本标记语言标记中选择文本，而周围没有标记（JSoup）

我想选择强标签内的文本，但不在其下的div。。。有没有可能直接与jsoup合作？我的选择尝试（不工作，选择强标签内的完整内容）： HTML:
使用JSoup的超文本标记语言解析

我是新来的。我想解析html，但问题是我们必须在中指定的URL，我将在运行时从其他页面响应此URL。有没有办法将收到的网址传递到中？我读过这样的东西：但是我不知道如何使用它。我很想知道是否有其他方法比jsoup更好。

超文本标记语言/CSS： flip3d如何用4张图片做360度

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档