Develop Reference

Button for overlay menu disappears when menu is opened

When I place my menu button inside my header div and open the menu, the close button disappears. This happens after the overlay on the screen. I have tried to fix this with the z-index but nothing changes. I can only see the open button when the menu is closed inside the header. The close menu button shows when the button is not placed inside a header div.
$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
#charset "UTF-8";
ul {
margin:0;
padding:0;
text-decoration:none;
list-style:none;
}
li {
padding:0;
margin:0;
}
/*styling open close button*/
.button {
padding:10px;
display:inline;
position:fixed;
right:50px;
top:6px;
z-index:999;
font-size:30px;
}
.button a {
text-decoration:none;
}
.btn-open:after {
color:#071914;
content:"\f0c9";
font-family:"FontAwesome";
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.btn-open:hover:after {
color:#fafd23;
}
.btn-close:after {
color:#071914;
content:"\f00d";
font-family:"FontAwesome";
z-index:100;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.btn-close:hover:after {
color: #fafd23;
}
/*overlay*/
.overlay {
display:none;
position:fixed;
top:0;
height:100%;
width:100%;
background:#FFF;
overflow:auto;
z-index:99;
}
/** SOCIAL ICON **/
.wrap {
color:#f2f2f2;
text-align:center;
max-width:90%;
margin:0 auto;
}
.wrap ul.wrap-nav {
border-bottom:1px solid #071914;
text-transform:capitalize;
padding:100px 0px 50px;
}
.wrap ul.wrap-nav li {
font-size:1.7em;
display:inline-block;
vertical-align:top;
width:24%;
position:relative;
}
.wrap ul.wrap-nav li a {
color:#071914;
display:block;
padding:8px 0;
text-decoration:none;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.wrap-nav h1{
color:#071914;
font-family:'spinweradbold';
text-transform:uppercase;
letter-spacing:1px;
}
.wrap ul.wrap-nav ul {
padding:20px 0;
}
.wrap ul.wrap-nav ul li {
display:block;
font-size:.7em;
width:100%;
color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color:#071914;
}
.wrap ul.wrap-nav ul li a:hover {
color:#6dd7d7;
}
.social {
font-size:25px;
padding:20px;
}
.social p {
margin:0;
padding:20px 0 5px 0;
line-height:30px;
font-size:13px;
}
.social-icon {
width:80px;
height:50px;
background:#071914;
color:#fff;
display:inline-block;
margin:0 20px;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.social-icon:hover {
background:#6dd7d7;
color:#FFF;
}
.social-icon i {
margin-top:12px;
}
.content {
width:100%;
margin-top:200px;
font-size:20px;
color#333;
text-align: center;
}
#media screen and (max-width:48em) {
.button{
margin-top:15px;
margin-right:-30px;
}
.wrap ul.wrap-nav>li {
width:100%;
padding:20px 0;
border-bottom:1px solid #6dd7d7;
}
.wrap ul.wrap-nav {
padding:30px 0px 0px;
}
nav ul {
opacity:0;
visibility:hidden;
}
.social {
color:#c1c1c1;
font-size:25px;
padding:15px 0;
}
.social-icon {
width:100%;
height:50px;
background:#fff;
color:#333;
display:block;
margin:5px 0;
}
.social p {
margin:0;
padding:20px 0 5px 0;
line-height:30px;
font-size:5px;
}
}
<div class="header-section">
<div class="logo">
<a class="logo-img" href="#home"><img src="images/logo.png"></a>
</div>
<div class="button">
<a class="btn-open" href="#current"></a>
</div>
</div><!--end of header-->
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li><h1>main</h1>
<ul>
<li>Welcome</li>
<li>Biography</li>
<li>Contact Me</li>
</ul>
</li>
<li><h1>web</h1>
<ul>
<li>Ad Designs</li>
<li>Web Design</li>
<li>Mockups</li>
<li>Wireframes</li>
</ul>
</li>
<li><h1>graphic</h1>
<ul>
<li>Logo Design</li>
<li>Typography</li>
<li>Color Theory</li>
</ul>
</li>
<li><h1>illustration</h1>
<ul>
<li>Illustrations</li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://linkedin.com/in/natishacorona" target="_blank">
<div class="social-icon">
<i class="fa fa-linkedin"></i>
</div>
</a>
<a href="https://twitter.com/GAN_N" target="_blank">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
</div>
</div>
</div>
</div><!--header-main-->

Invert colors of html when clicking (except imgs)

I've created an on/off button and I would like for the html's content's colors to invert when on and to be normal when off! And also I would like for the images and gifs to stay the same color.. I know it's complicated :x But the problem is since the button would be inside a div in html I can't use + space ~ or > to trigger the effect.. Does anyone know how it would be possible to do it please?
Here's the code for now but it's wrong for the html part..
function invertFunction(x) {
x.classList.toggle("invertbutton");
}
.invertfunction{
cursor:pointer;
position:fixed;
top:20px;
left:20px;
width:60px;
height:30px;
}
#onbutton{
width:60px;
height:30px;
background-color:#fff;
border-radius:10px;
border:1px solid #848484;
-webkit-transition:.3s ease;
-moz-transition:.3s ease;
-o-transition:.3s ease;
transition:.3s ease;
}
#movingbutton{
width:30px;
height:30px;
border-radius:10px;
border:1px solid #848484;
background-color:#BDBDBD;
-webkit-transition:.2s ease;
-moz-transition:.2s ease;
-o-transition:.2s ease;
transition:.2s ease;
}
.invertbutton #onbutton{
background-color:#42B94E;
}
.invertbutton #movingbutton{
transform: translate(30px);
}
.invertbutton .html{
-webkit-filter: invert(100%);
filter: invert(100%);
}
<html>
<div class="invertfunction"onclick="invertFunction(this)">
<div id="onbutton">
<div id="movingbutton"></div>
</div>
</div>
</html>
Thanks for the help! :)

You can use this code here:
function invertFunction(x) {
x.classList.toggle("invertbutton");
if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
$("div:not(#movingbutton)").css('filter', 'invert(100%)');
$("img").css('filter', 'invert(100%)');
} else {
$("div:not(#movingbutton)").css('filter', 'invert(0%)');
$("img").css('filter', 'invert(0%)');
}
}
And you can remove this css:
.invertbutton .html{
-webkit-filter: invert(100%);
filter: invert(100%);
}
function invertFunction(x) {
x.classList.toggle("invertbutton");
if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
$("div:not(#movingbutton)").css('filter', 'invert(100%)');
$("img").css('filter', 'invert(100%)');
} else {
$("div:not(#movingbutton)").css('filter', 'invert(0%)');
$("img").css('filter', 'invert(0%)');
}
}
div:not(#movingbutton) {
filter: invert(0%);
}
.invertfunction {
cursor: pointer;
position: fixed;
top: 20px;
left: 20px;
width: 60px;
height: 30px;
}
#onbutton {
width: 60px;
height: 30px;
background-color: #fff;
border-radius: 20px;
border: 1px solid #848484;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
#movingbutton{
width: 28px;
height: 28px;
border-radius: 20px;
border: 1px solid #848484;
background-color: #BDBDBD;
-webkit-transition: .2s ease;
-moz-transition: .2s ease;
-o-transition: .2s ease;
transition: .2s ease;
}
.invertbutton #onbutton {
background-color: #42B94E;
}
.invertbutton #movingbutton {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="invertfunction"onclick="invertFunction(this)">
<div id="onbutton">
<div id="movingbutton">
</div>
</div>
</div>
<br>
<br>
<br>
<div style="background-color: red;" height="100px" width="100px">Example div1</div>
<div style="background-color: green;" height="100px" width="100px">Example div2</div>
<div style="background-color: blue;" height="100px" width="100px">Example div3</div>
<div>
<img width="100px" src="http://www.lyricsmode.com/i/upictures/205882.gif">
</div>
CodePen example

Arrow turning 180deg when clicking on dropdown menu

I have a dropdown menu and want the arrow on the right of it to turn 180deg when I click on it! The problem is I've set the arrow in the html and not in the javascript.. But I thought there was maybe a way to put it in the css when going from #navi to #navigation..
Here's my code
<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navigation").slideToggle(500);
});
});
</script>
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<div id="navigation">
<div id="navigationin">
Sorry I can't seem to make it work.. Thank you for any help you can give!
(if you want the actual exemple it's on www.typhotoshop.tumblr.com in the left hovering bar)

All you have to do is , adding css3 transition on your arrow , and adding/removing a custom class to this last to rotate 180° , in which the transition is triggered.
#navi .fa-chevron-down {
transition: all 0.5s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
add in js the toggleclass when click on navi
$("#navi .fa-chevron-down").toggleClass("rtoate180");
bellow working snippet :
$(document).ready(function(){
$("#navi").click(function(){
$("#navi .fa-chevron-down").toggleClass("rtoate180");
$("#navigation").stop().slideToggle(500);
});
});
#navi .fa-chevron-down {
transition: all 0.5s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navi"> NAVIGATION
<i class="fa fa-chevron-down"></i>
</div>
<div id="navigation">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
<div id="navigationin"></div>

you can use css to do your desire output as well
margin-top: 100px;
transform: rotateY(180deg);

<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navigation").slideToggle(500);
});
});
</script>
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<div id="navigation"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<div id="navigation">
<div id="navigationin">

Click not possible after applying js function

I'm sorry this is going to be confusing, I have applied a js function to a div of a sidebar so when you click another bar slides from the left. But it used to work with the hover css function. The thing is on the sliding sidebar there are a few menus you can click. Now that I've changed the way the bar slides (with css), you can't click on them anymore.
My code is down there but the snippet isn't looking good at all because the dimensions are wrong I guess.. Sorry but you can see what it looks like here
function myFunction(x) {
x.classList.toggle("change");
}
<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navi .fa-chevron-down").toggleClass("rtoate180");
$("#navigation").slideToggle(500);
});
});
</script>
#more{
position:fixed;
top:0;
left:0px;
padding:5px;
font-size:20px;
line-height:40px;
text-align:center;
width:60px;
height:40px;
display:inline-block;
{block:IfSidebarRight}
right:0px;
left:auto;
{/block:IfSidebarRight}
}
.bar1, .bar2, .bar3 {
cursor:pointer;
position:relative;
left:18px;
top:25px;
width: 35px;
height: 5px;
background-color:{color:Main icon background};
margin: 6px 0px;
transition: 0.4s;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
-moz-transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
-ms-transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
-ms-transform: rotate(45deg) translate(-8px, -8px) ;
}
/*------ SIDEBAR -----*/
#sidebar{
width:300px;
height:100%;
margin-left:-300px;
{block:IfSidebarRight}
margin-left:300px;
{/block:IfSidebarRight}
top:0px;
}
.change ~ #sidebar2{
margin-left:365px;
{block:IfSidebarRight}
margin-left:-300px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*------ Narrow sidebar -----*/
#sidebar1{
z-index:10;
position:fixed;
top:0px;
left:0;
width:70px;
height:100%;
background:{color:Narrow sidebar background};
{block:IfSidebarRight}
right:0;
left:auto;
{/block:IfSidebarRight}
}
/*------ Wide sidebar -----*/
#sidebar2{
z-index:0;
position:fixed;
top:0px;
margin-left:65px;
width:220px;
height:100%;
background:{color:Wide sidebar background};
background-image:url({image:Wide sidebar background});
{block:IfWideSidebarBackgroundTransparent}
background:transparent;
{/block:IfWideSidebarBackgroundTransparent}
{block:IfSidebarRight}
margin-left:75px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Avatar */
#avatar {
margin: auto;
margin-top: 65px;
width: 50px;
height: 50px;
border-radius: 60px;
border:0px solid
z-index:10;
}
#avatar img {
width: 100%;
height: 100%;
border-radius: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#avatar img:hover {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
-ms-transform: scale(1.4, 1.4);
-webkit-transform: scale(1.4, 1.4);
transform: scale(1.4, 1.4);
}
/* Description */
#description{
position:relative;
margin-left:20px;
color:{color:Description};
background:{color:Description background};
border:5px solid {color:Description background};
max-height:300px;
padding:10px;
width:150px;
overflow-y:auto;
margin-top:20px;
font-size:13px;
line-height:18px;
}
#description:after{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 57px;
}
/* Search box */
#search{
margin-top:10px;
margin-left:20px;
width:180px;
height:30px;
overflow:hidden;
color:{color:Search};
background:{color:Search box background};
}
#search i{
position:absolute;
margin-left:67px;
margin-top:9px;
color:{color:Search}!important;
font-size:12px;
z-index:1000;
}
/* Navigation */
#navi{
cursor:pointer;
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navi .fa-chevron-down {
transition: all 0.7s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a:hover{
cursor:pointer;
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
/* Social icons */
#socialicons{
margin-top:0px;
}
#socialicons i{
display:inline-block;
color:{color:Navigation link}!important;
margin:5px;
font-size:15px;
}
#socialicons i:hover{
color:{color:Hover}!important;
}
/*----- MAIN CONTAINER -----*/
#container{
position:absolute;
top: 50px;
left:50%;
margin-bottom:10px;
min-height:500px;
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: -o-calc(100% - 100px);
width: calc(100% - 100px);
min-width:610px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index:1;
{block:IfShowHeader}
top: -moz-calc(100% + 50px);
top: -webkit-calc(100% + 50px);
top: -o-calc(100% + 50px);
top: calc(100% + 50px);
{/block:IfShowHeader}
{block:TagPage}
top:50px;
{/block:TagPage}
{block:SearchPage}
top:50px;
{/block:SearchPage}
{block:PermalinkPage}
top:50px;
{/block:PermalinkPage}
}
<div id="more">
<div id="sidebar">
<div id="sidebar1" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div id="avatar"><img src="{image:Avatar}"></div>
</div>
<div id="sidebar2">
<div id="description">
{Description}</div>
<div id="search">
<form action="/search" method="get"><i class="fa fa-search"></i>
<input type="text" name="q" value="SEARCH" style="position:absolute; left:20px; width:160px; height:25px; padding-left:10px; font-family:{select:Body font}; font-size: 12px; background:transparent; border:1px solid transparent; color:{color:Search};"/></form>
</div>
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<!--Navigation-->
<div id="navigation">
<div id="navigationin">
{text:Link One Title}
{text:Link Two Title}
{text:Link Three Title}
{text:Link Four Title}
{text:Link Five Title}
</div>
<!--End navigationin-->
<div id="socialicons">
<center>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-youtube"></i>
</center>
</div>
<!--End socialicons-->
</div>
</div>
<!--End sidebar1-->
</div>
<!--End sidebar-->
</div>
<!--End more-->
Thank you so much if you can help me I know it's not clear.. I'm sorry!

Use the developer tools and check out #container - it's covering your sidebar, so - you can't click what's under it.

Auto flipping div w/keyframes

Hello currently I have a div where I would like it to rotate consistently without having to hover or click. here is a working jfiddle of what it is currently. I would like to make that div rotate consistently. http://jsfiddle.net/CsDLG/1/
h3 {
font: 22px normal Futura, sans-serif;
color:#333;
}
#f1_container {
width:430px;
height:250px;
position:relative;
left:35px;
top:10px;
z-index:1;
-webkit-perspective:1000px;
-moz-perspective:1000px;
-o-perspective:1000px;
perspective:1000px;
margin:15px;
}
#f1_card {
width:100%;
height:100%;
-webkit-transform-style:preserve-3d;
-webkit-transition:all 1s linear;
-moz-transform-style:preserve-3d;
-moz-transition:all 1s linear;
-o-transform-style:preserve-3d;
-o-transition:all 1s linear;
transform-style:preserve-3d;
transition:all 1s linear;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
.face {
position:absolute;
width:100%;
height:100%;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
.face.back {
display:block;
-webkit-transform:rotateY(180deg);
-webkit-box-sizing:border-box;
-moz-transform:rotateY(180deg);
-moz-box-sizing:border-box;
-o-transform:rotateY(180deg);
-o-box-sizing:border-box;
transform:rotateY(180deg);
box-sizing:border-box;
color:#f5f5f5;
text-align:center;
background-color:#f5f5f5;
padding:10px;
}
.underz {
background:url(http://farm6.staticflickr.com/5069/5614374365_24c4fd01d2_z.jpg) center bottom;
width:430px;
height:250px;
}
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face 1">
<div class="underz"></div>
</div>
<div class="back face center"><h3>We work while we play and have fun!</h3>
</div>
</div>
</div>

You need a CSS3 animation to do this. (remember this feature only exists in Safari and Chrome). then, set the iteration count value to infinite.
here is a demo
animation-iteration-count:infinite;
-webkit-animation-iteration-count: infinite;