How to Flip Div's in Randomly


Tags: javascript,jquery,css,html5,css3

Problem :

I have created the application where All divs are Flip Vertically on hover . I wanted to make it random without hover . How should i do that ?

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 the 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 is my work :- http://jsfiddle.net/rushijogle/7x75466y/

Any suggestion would be thankful .

If you don't agree plz do not mark as negative

Thankx in adavcne



Solution :

I simplified your markup and CSS quite a bit. Also gave it a more 3D look. You can use setInterval to 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);

    CSS Howto..

    How to avoid CSS conflict using jquery?

    How to make
    , , or list display tabular data as a table?

    How do I overlay a gradient (background) on top of a border?

    How do I make my images in my div change opacity on hover?

    DropDown Menu won't show for more than a second..not working.

    How to change or remove quote symbol in css

    How to change css class for the inputfield and label when validation fails?

    How can I achieve this Flash effect using jQuery?

    How to style all the same XSL FO elements? XSL FO like CSS?

    How to use css3 transition on hover for td?

    Menu - Show up the Submenuitems under the whole Menuitems - HTML/CSS

    How to select only top-level li in recursive menu?

    How to get the last image viewed to stick instead of reverting to the default in a pure CSS image gallery?

    CKEditor issue: How to apply custom css to CKEditor [closed]

    How to toggle the contents of span when clicked?

    How to not display css padding when span element is empty

    How to remove blue highlight when you hold on input buttons in css? [closed]

    How can I count CSS page breaks for printed HTML?

    Bootstrap: how to clear images in a gallery?

    How can I stack two arrow images (upvote/downvote) on top of eachother using CSS?

    How to generate css using google chrome inspector to further use them?

    How to change background color of my selector's Pseudo-element on rollover?

    How to give menu sub menu options

    How to properly set the 100% DIV height to match document/window height?

    How to size this text with css?

    CSS+HTML: How to draw table/cell border

    How to set a child's element 50px narrower to its parent element in css? [closed]

    CSS: How to prevent contents of scrollable div from appearing behind a fixed div

    How to get css property value in pure javascript

    How to apply jQuery on css selector :before [duplicate]