Question

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

1）我可以通过计时器更改此设置。所以它可以在一段时间后自动翻转（比如说每10秒翻转一次）没有任何鼠标移动。

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

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

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

我所做的更改如下：

加载transform rotate div包含图片（#a）的div加载-180deg，因为这最初看起来好像在#b后面{1}}包含文字（#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); } }和副-versa。使用单个动画无法实现这一点，因此我为翻盖的正面和背面添加了单独的动画关键帧设置。

＆＃13;

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

＆＃13;

var str1 = "ABCDEFGHIJK";
var str2 = "DEFG";
if(str1.indexOf(str2) != -1){
    alert(str2 + " found");
}

＆＃13;

Answer 2

使用setInterval方法翻转图像以在某个时间间隔翻转。 Demo

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

Answer 3

不确定。你可以使用伪类：hover和css属性 transform：rotateY（180deg）;对于翻转你可以使用动画和关键帧来控制时间

一段时间后翻转

3 个答案: