一定时间后翻转

Question

我正在学习使用 CSS 制作一些动画（从零开始）。我在 website 上看到了这个很酷的例子。我想将其应用到我自己的 CSS。但是我正在考虑对此进行一些更改

1) 我可以通过计时器更改它吗？所以它可以在一定时间后自动翻转（比如每 10 秒翻转一次）无需任何鼠标移动。

2) 我的 HTML 文件中有两个 <div>，我想从一个切换到另一个。不幸的是 他们得到了相同的 class（类似于 :widget-inner loadable .widget-size-2x1）。那么我可以在 CSS 文件中使用 #id （ID 选择器）而不是 class 选择器吗？

3) 我看到其他例子使用额外的JS文件来实现翻转动画。理想情况下，我可以只使用 CSS 来做到这一点吗？

我在下面有一个示例代码，它只能部分工作。它不显示第一张图片。请指导如何进行所需的更改。

#draggable {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#dashboard {
  perspective: 1000;
}
#dashboard {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.loadable {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 20s infinite;
}
#b {
  display: block;
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
  -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 20s infinite;
}
/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    40%   {transform: rotateY(0deg);}
    50% {transform: rotateY(180deg);}
    90% {transform: rotateY(180deg);}
    100% {transform: rotateY(0deg);}
}

<div id="draggable">
<div id="dashboard" class="shadow">
  <div class="widget-inner loadable" id="a">
    <img src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg"/>
  </div>
  <div class="widget-inner loadable" id="b">
    <p>This is nice for exposing more information about an image.</p>
    <p>Any content can go here.</p>
  </div>
</div>
</div>

Answer 1

当然可以。你可以使用伪 class :hover 和 css 属性变换：旋转Y（180度）；对于翻转，您可以使用动画和关键帧控制时间

Answer 2

使用 setInterval 方法翻转图像以按一定间隔翻转。 Demo

$(function() {            
    setInterval(function() {
        $('#f1_card').toggleClass("transformStyle transformRotate");
    }, 3000)
})

Answer 3

根据问题中提供的信息和您的评论，您似乎需要以下代码段。这将保持无限翻转，而不需要任何鼠标交互来触发翻转动作。当显示图像时，文本将隐藏在后面，反之亦然。

我所做的修改如下：

将 transform 添加到 rotate div 中，其中包含图像 (#a) 加载时 -180 度，因为这最初看起来好像在后面包含文本 (#b) 的 div。
翻转时，我们必须同时翻转#a和#b，但要以完全相反的方式翻转。也就是说，当#a通过rotateY(0deg)出现时，#b必须落后，因此在那个时间点，它应该有rotateY(180deg)，反之亦然-反之亦然。这无法使用单个动画实现，因此我为翻转的正面和背面添加了单独的动画关键帧设置。

#draggable {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}

#dashboard {
  -webkit-perspective: 1000;
  perspective: 1000;
}

#dashboard {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;  
  -webkit-transition: all 1.0s linear;
  transition: all 1.0s linear;
}

.loadable {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#a{
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-animation: mymoveback 20s infinite;  
  animation: mymoveback 20s infinite;  
}
#b {
  display: block;
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
  -webkit-animation: mymove 20s infinite;
  animation: mymove 20s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
  40% {
    -webkit-transform: rotateY(0deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
  }
  90% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
  }
}
@-webkit-keyframes mymoveback {
  40% {
    -webkit-transform: rotateY(-180deg);
  }
  50% {
    -webkit-transform: rotateY(0deg);
  }
  90% {
    -webkit-transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(-180deg);
  }
}

@keyframes mymove {
  40% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  90% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
@keyframes mymoveback {
  40% {
    transform: rotateY(-180deg);
  }
  50% {
    transform: rotateY(0deg);
  }
  90% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-180deg);
  }
}

<div id="draggable">
<div id="dashboard" class="shadow">
  <div class="widget-inner loadable" id="a">
    <img src="http://lorempixel.com/450/281"/>
  </div>
  <div class="widget-inner loadable" id="b">
    <p>This is nice for exposing more information about an image.</p>
    <p>Any content can go here.</p>
  </div>
</div>
</div>

一定时间后翻转

Flip after a certain period of time

html

css

css-animations