Bootstrap Snippet Flippant using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="hero-unit">
        <h1>Flippant.<span>js</span></h1>
        <small class="muted">Try it out on the buttons below.</small> 
        <p>Get the code at <a href="https://github.com/mintchaos/flippant.js">github.com/mintchaos/flippant.js</a>
        </p>
    </div>
    <div class="row">
        <div class="span4">
            <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btnflip btn" href="#">Modal »</a>  <a class="btnflip btn card" href="#">Card »</a>
            </p>
        </div>
        <div class="span4 flippant">
            <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p><a class="btn btnflip" href="#">Modal »</a>  <a class="btnflip btn card" href="#">Card »</a>
            </p>
        </div>
        <div class="span4">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn btnflip" href="#">Modal »</a>  <a class="btnflip btn card" href="#">Card »</a>
            </p>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.flippant {
    transform: perspective(500px) rotateY(0deg);
    -webkit-transform: perspective(500px) rotateY(0deg);
    -moz-transform: perspective(500px) rotateY(0deg);
    /*z-index: 200;*/
}
.flippant-back {
    transform: perspective(500px) rotateY(-180deg);
    -moz-transform: perspective(500px) rotateY(-180deg);
    -webkit-transform: perspective(500px) rotateY(-180deg);
    height: 0;
    /*z-index: 200;*/
}
.flippant, .flippant-back {
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
.flippant, .flipper {
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.flippant.flipped {
    transform: perspective(500px) rotateY(180deg);
    -moz-transform: perspective(500px) rotateY(180deg);
    -webkit-transform: perspective(500px) rotateY(180deg);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function (e) {
    if ("function" == typeof bootstrap) bootstrap("flippant", e);
    else if ("object" == typeof exports) module.exports = e();
    else if ("function" == typeof define && define.amd) define(e);
    else if ("undefined" != typeof ses) {
        if (!ses.ok()) return;
        ses.makeFlippant = e
    } else "undefined" != typeof window ? window.flippant = e() : global.flippant = e()
})(function () {
    var define, ses, bootstrap, module, exports;
    return (function (e, t, n) {
        function i(n, s) {
            if (!t[n]) {
                if (!e[n]) {
                    var o = typeof require == "function" && require;
                    if (!s && o) return o(n, !0);
                    if (r) return r(n, !0);
                    throw new Error("Cannot find module '" + n + "'")
                }
                var u = t[n] = {
                    exports: {}
                };
                e[n][0].call(u.exports, function (t) {
                    var r = e[n][1][t];
                    return i(r ? r : t)
                }, u, u.exports)
            }
            return t[n].exports
        }
        var r = typeof require == "function" && require;
        for (var s = 0; s < n.length; s++) i(n[s]);
        return i
    })({
        1: [
            function (require, module, exports) {
                exports.flip = flip
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Flippant"
Bootstrap 2.3.2 Snippet by kdridi

Related: See More

Questions / Comments:

"Flippant" Bootstrap 2.3.2 Snippet by kdridi

Related: See More

Questions / Comments:

"Flippant"
Bootstrap 2.3.2 Snippet by kdridi