How to create a discard effect on a div using javascript

Question

I want to create a flip effect (same as webkit and 3d transform transitions) on a DIV using simple javascript and CSS and NO libraries or plugins. How can i achieve this? Since most CSS3 properties work for webkit browsers. And most javascript solutions use libraries like jquery and its plugins. I am looking for a solution that does not use any library, but only javascript / CSS and still works with cross browser.

Any help would be appreciated.

Regards, manishekhawat

Answer 1

3D CSS3 webkit. - JS polyfill, cssSandpaper (http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/).

, JS.

3D - () CSS3 (, ). - , javascript, .

Answer 2

:

CSS- - ; , - WTF-Pixar, . CSS - - CSS, , . , .

HTML

HTML , :

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

: " ", , , CSS. ontouchstart, .

CSS

/* entire container, keeps perspective */
.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: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

:

• - , , 180 . . -180deg .

• , " " ; , .

• z, , , -

• 180 , .

! , , !

CSS Flip Toggle

, JavaScript, CSS :

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper 
{
    transform: rotateY(180deg);
}

flip JavaScript - . JavaScript,

document.querySelector("#myCard").classList.toggle("flip") !

CSS

, . , :

.vertical.flip-container {
    position: relative;
}

    .vertical .back {
        transform: rotateX(180deg);
    }

    .vertical.flip-container .flipper {
        transform-origin: 100% 213.5px; /* half of height */
    }

    .vertical.flip-container:hover .flipper {
        transform: rotateX(-180deg);
    }

, X-, Y.

, .