我不太擅长css3动画,所以我需要一些帮助来改进输出。
我正在努力实现windows8的瓷砖效果,我几乎完成了。
我正在努力实现这个目标
这里是jsfiddle
翻转的css如下。
后缀'1'表示块1,'2'表示块2,依此类推'til 5表示五个块。

/*block one*/

    .flip-container1, .front1, .back1 {
      position:relative;
      width: 432px;
      height: 140px;
    }

    .flipper1 {
      -webkit-transition: 0.6s;
      -webkit-transform-style: preserve-3d;

      -moz-transition: 0.6s;
      -moz-transform-style: preserve-3d;

      transition: 0.6s;
      transform-style: preserve-3d;

      position: relative;
    }

    .front1, .back1 {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      background: #2FB1BE;
    }



    .vertical1.flip-container1 {
      position: relative;
    }

      .vertical1 .back1 {
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        transform: rotateX(180deg);
      }

      .vertical1.flip-container1 .flipper1 {
        -webkit-transform-origin: 100% 70px;
        -moz-transform-origin: 100% 70px;
        transform-origin: 100% 70px;
      }
@keyframes myFirst{
        from{
        webkit-transform: rotateX(-180deg);
        -moz-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
      }
      to{
        webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        transform: rotateX(180deg);
      }
  }
  @-webkit-keyframes myFirst{
    from{
        webkit-transform: rotateX(-180deg);
        -moz-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
      }
      to{
        webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        transform: rotateX(180deg);
      }
  }
  .vertical1.flip-container1 .flipper1{
    animation:myFirst 3s;
    -webkit-animation:myFirst 3s;
    animation-direction:normal;
    -webkit-animation-direction:normal;
    animation-iteration-count:infinite;
  }

现在我想解决以下两个问题:
我希望一次只翻转一个瓷砖。
目前,我已经应用了不同的动画时间,看起来很好,但多个瓷砖是翻转一次。
2-我希望特定平铺的动画在显示背面时停止,然后移动到另一个平铺,当再次轮到它时,则再次显示正面。目前,它显示正面,然后立即显示背面,然后暂停一段时间。

最佳答案

对于第一个问题,您需要使用:hover伪标记,如果需要,还需要使用特定于tile的id。
我不太明白你说的“然后移动到另一个瓷砖,当它再次轮到,然后前面再次显示”是什么意思。但是,您已经将animation-iteration-count:设置为infinite,所以动画当然会无限地继续下去。
你似乎还不完全理解css动画/转换。也许你应该在鼠标悬停的时候练习让一个盒子变大,然后努力使一个盒子翻转。W3SchoolsCSS Animations有很大的参考价值。

07-24 09:51
查看更多