Flip after a certain period of time - html

Question

I'm learning to use CSS to make some animations (start from zero). I saw this cool example on a website. I would like to apply this to my own CSS. However I'm thinking several changes to this
1) Can I change this by a timer. So it can flip automatically after a certain period (say flip every 10 seconds) without any mouse movement.
2) I have two <div> in my HTML file that I want to flip from one to anther. Unfortunately they have got the same class (Something like :widget-inner loadable .widget-size-2x1). So can I use #id (ID selector) instead of class selector in CSS file?
3) I saw other examples using an extra JS file to achieve the flipping animation. Ideally can I just use only CSS to do this?
I have a sample code below which only works partly. It doesn't show the first picture. Please guide on how to make the required changes.
#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

Based on the information provided in the question and your comments, it seems like the below snippet is what you require. This would keep flipping infinitely without the need for any mouse interactions to trigger the flip action. When the image is shown, the text will get hidden behind and vice-versa.
The changes that I have made are as follows:
Added transform to rotate the div which contains the image (#a) by -180deg on load because this has to initially look as though it is behind the div that contains the text (#b).
When we flip, we have to flip both #a and #b synchronously but in exactly opposing manner. That is, when #a is made to come forward by using rotateY(0deg), the #b has to go behind and hence at that point in time, it should have rotateY(180deg) and vice-versa. This cannot be achieved using a single animation and hence I have added a separate animation keyframe setting for the front and back sides of the flip.
#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>

Answer 2

Flip images to flip on some interval using setInterval method. Demo
$(function() {
setInterval(function() {
$('#f1_card').toggleClass("transformStyle transformRotate");
}, 3000)
})

Answer 3

Sure. you can use pseudo class :hover, and css property
transform: rotateY(180deg); for doing flipping you can control timing using animation and keyframes