页面加载然后循环时的翻转卡延迟转换

Question

我在这里有点脑筋，现在似乎无法弄清楚。

我目前有四张翻页卡片，它们在悬停时会垂直向下翻转。我要在这里实现的目标是使翻页卡在页面加载时向下翻页，一次又一次，无悬停，然后在第四张翻页后向下翻页，全部重置并循环相同的设置无限地再次过渡。

我敢肯定，这是一个非常明确的答案，我的大脑目前还不了解。我已经对其进行了很多修改，以至于将其重新设置为悬停即可。

P.S。对于CSS混乱感到抱歉，我在尝试找到解决方案的许多尝试中还是放手了。任何帮助深表感谢！

这是HTML：

<div class="flip-card1">
  <div class="flip-card-inner1">
    <div class="flip-card-front1">
    </div>
    <div class="flip-card-back1">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>


<div class="flip-card2">
  <div class="flip-card-inner2">
    <div class="flip-card-front2">
    </div>
    <div class="flip-card-back2">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>


<div class="flip-card3">
  <div class="flip-card-inner3">
    <div class="flip-card-front3">
    </div>
    <div class="flip-card-back3">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>


<div class="flip-card4">
  <div class="flip-card-inner4">
    <div class="flip-card-front4">
    </div>
    <div class="flip-card-back4">
      <h1>Test</h1> 
      <p>This is a test</p>
    </div>
  </div>
</div>

这是CSS：

.flip-card1 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}


.flip-card-inner1 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;
}


.flip-card1:hover .flip-card-inner1 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}


.flip-card-front1, .flip-card-back1 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.flip-card-front1 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;

}


.flip-card-back1 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}


.flip-card2 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}


.flip-card-inner2 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom; 
}


.flip-card2:hover .flip-card-inner2 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}


.flip-card-front2, .flip-card-back2 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.flip-card-front2 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}


.flip-card-back2 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}


/*FLIP-CARD3 ANIMATION*/
.flip-card3 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}


.flip-card-inner3 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;  
}


.flip-card3:hover .flip-card-inner3 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}


.flip-card-front3, .flip-card-back3 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.flip-card-front3 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}


.flip-card-back3 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}


.flip-card4 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}


.flip-card-inner4 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom; 
}


.flip-card4:hover .flip-card-inner4 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}


.flip-card-front4, .flip-card-back4 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


.flip-card-front4 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}


.flip-card-back4 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}

这里是jsfiddle

Answer 1

使用 using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class camMOVE : MonoBehaviour { public Transform handleview; public Transform pressureview; public Transform wallview; public Transform sechandleview; public Transform pressuretwoview; public Transform switchview; public GameObject handlebtn; public GameObject pressurebtn; public GameObject wallbtn; public GameObject handletwobtn; public GameObject pressuretwobtn; public GameObject switchbtn; public float transitionSPEED; Transform currentVIEW; public bool flag = false; public bool isReached = false; Vector3 currentangel; public List<GameObject> modelparts; private void Start(){ handlebtn.SetActive (true); pressurebtn.SetActive (false); wallbtn.SetActive (false); handletwobtn.SetActive (false); pressuretwobtn.SetActive (false); switchbtn.SetActive (false); foreach (GameObject obj in modelparts) { obj.GetComponent<BoxCollider> ().enabled = false; } } private void Update(){ if (flag ) { transform.position = Vector3.Lerp (transform.position, currentVIEW.position, Time.deltaTime * transitionSPEED); //for camera rotation currentangel = new Vector3 (Mathf.LerpAngle (transform.rotation.eulerAngles.x, currentVIEW.transform.rotation.eulerAngles.x, Time.deltaTime * transitionSPEED), Mathf.LerpAngle (transform.rotation.eulerAngles.y, currentVIEW.transform.rotation.eulerAngles.y, Time.deltaTime * transitionSPEED), Mathf.LerpAngle (transform.rotation.eulerAngles.z, currentVIEW.transform.rotation.eulerAngles.z, Time.deltaTime * transitionSPEED)); transform.eulerAngles = currentangel; } } public void Handleview(){ currentVIEW = handleview; handlebtn.SetActive (false); flag = true; } public void Pressureview() { currentVIEW = pressureview; pressurebtn.SetActive (false); flag = true; } public void Wallview() { currentVIEW = wallview; wallbtn.SetActive (false); flag = true; } public void Secondhandleview(){ currentVIEW = sechandleview; handletwobtn.SetActive (false); flag = true; } public void Pressuretwoview(){ currentVIEW = pressuretwoview; pressuretwobtn.SetActive (false); flag = true; } public void Switchview(){ currentVIEW = switchview; switchbtn.SetActive (false); flag = true; } } 依次添加动画类，并使用jquery setInterval方法在一段时间后删除同一类。

对于相同的逻辑，请使用以下代码段。 注意：删除了所有delay选择器。

hover

$(document).ready(function(){
  var i = 0;
  setInterval(function(){
  
   $(".flip-card-inner"+ i).addClass("hoverit").delay( 1000 - (i*20) ).queue(function(){
      $(this).removeClass("hoverit").dequeue();
   });

  if(i == 4) {
    i = 0;
  }
  i++;
     
  }, 1000);
  
});

.hoverit {
    transform: rotatex(-180deg);
    perspective: 1000px;
}

.flip-card1 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}

.flip-card-inner1 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;
}

.flip-card-front1, .flip-card-back1 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front1 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}

.flip-card-back1 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
 
}



/*FLIP-CARD2 ANIMATION*/
.flip-card2 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}

.flip-card-inner2 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;   
}

.flip-card2:hover .flip-card-inner2 {
    transform: rotatex(-180deg);
    perspective: 1000px;
}

.flip-card-front2, .flip-card-back2 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front2 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}

.flip-card-back2 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}

/*FLIP-CARD3 ANIMATION*/
.flip-card3 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}

.flip-card-inner3 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;
    
}


.flip-card-front3, .flip-card-back3 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front3 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}

.flip-card-back3 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}
/*FLIP-CARD4 ANIMATION*/
.flip-card4 {
    background-color: transparent;
    width: 60%;
    height: 150px;
    margin-left: 75px;
    perspective: 1000px;
}

.flip-card-inner4 {
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transform-origin: bottom;    
}


.flip-card-front4, .flip-card-back4 {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front4 {
    background-color: transparent;
    color: black;
    z-index: 2;
    border-radius: 10px;
}

.flip-card-back4 {
    background-color: #2980b9;
    color: white;
    border-radius: 10px;
    transform: rotatex(-180deg);
    z-index: 1;
}

Answer 2

您是否正在尝试仅使用CSS？如果是这样，您可以使用关键帧来创建“自动翻转”效果。这是更新后的fiddle，似乎打破了悬停状态。如果您还需要悬停状态，则可能需要使用JS。我也可以提供帮助。编辑：在小提琴中，我将过渡原点更改为居中。我只是觉得动画效果更好。

@keyframes flip {
      0% {
        transform: rotatex(0deg)
      }
      25% {
        transform: rotatex(-180deg)
      }
      50% {
        transform: rotatex(0deg)
      }
      100% {
        transform: rotatex(0deg)
      }
}