javascript - How to Flip Div's in Randomly -

javascript - How to Flip Div's in Randomly -

i have created application divs flip vertically on hover . wanted create random without hover . how should ?

css

.vertical.flip-container { position: relative; float: left; margin-left: 50px; } .vertical .back { transform: rotatex(180deg); } .vertical.flip-container .flipper { transform-origin: 100% 50px; } .vertical.flip-container:hover .flipper { transform: rotatex(-180deg); } .flip-container { perspective: 1000; } /* flip pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotatey(180deg); } .flip-container, .front, .back { width: 100px; height: 100px; } .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; }

html

<div class="flip-container vertical" ontouchstart="this.classlist.toggle('hover');"> <div class="flipper"> <div class="front" style="background: red"> rushikesh </div> <div class="back" style="background:green"> jogle </div> </div> </div> <div class="flip-container vertical" ontouchstart="this.classlist.toggle('hover');"> <div class="flipper"> <div class="front" style="background: red"> rushikesh </div> <div class="back" style="background:green"> jogle </div> </div> </div> <div class="flip-container vertical" ontouchstart="this.classlist.toggle('hover');"> <div class="flipper"> <div class="front" style="background: red"> rushikesh </div> <div class="back" style="background:green"> jogle </div> </div> </div>

here work :- http://jsfiddle.net/rushijogle/7x75466y/

any suggestion thankful .

if don't agree plz not mark negative

thankx in adavcne

i simplified markup , css quite bit. gave more 3d look. can utilize setinterval flip them hover:

http://jsfiddle.net/7x75466y/5/

var $flippers = $(".flip-container"), qtflippers = $flippers.length; setinterval(function () { $flippers.eq(math.floor(math.random()*qtflippers)).toggleclass('hover'); }, 1000);

javascript jquery css html5 css3