Bootstrap Snippet Hearthstone Card CSS 3D Click/Drag using HTML CSS Javascript

1
2
3
4
5
6
7
8
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/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="card">
    <img src="http://images.ticiz.com/1992285_w640_h640_original23574925460.jpg" class="card-image" draggable="false">
</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
html,
body {
    height: 100%;   
}
body {
    background: #000;
    cursor: url(https://tebm.files.wordpress.com/2010/02/arge-proje-egitim-esnasc4b1nda-hallerim-1.jpg?w=1000&h=) 10 2, auto;
    overflow: hidden;
    &:active {
        cursor: url(https://tebm.files.wordpress.com/2010/02/arge-proje-egitim-esnasc4b1nda-hallerim-1.jpg?w=1000&h=) 10 2, auto;
    }
    &:after {
        background-color: #000;
        background-image: url(https://tebm.files.wordpress.com/2010/02/arge-proje-egitim-esnasc4b1nda-hallerim-1.jpg?w=1000&h=);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        bottom: 0;
        content: '';
        filter: blur( 8px );
        left: 0;
        opacity: 0.8;
        position: absolute;
        right: 0;
        top: 0;
        will-change: transform; 
        z-index: -1;
    }
}
.card {
    left: 0;
    top: 0;
    perspective: 400px;
    position: absolute;
    transform-style: preserve-3d;
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
var card,
    image,
    cardw,
    cardh,
    cardx,
    cardy,
    ocardx,
    ocardy,
    pinx,
    piny,
    pinxperc,
    pinyperc,
    targetx,
    targety,
    rx,
    ry,
    targetrx,
    targetry,
    scale,
    targetscale,
    ww,
    wh,
    md,
    mx,
    my,
    whoosh,
    whooshvol,
    whooshvoltarget,
    majesty,
    majestyvol,
    majestyvoltarget,
    audioloaded;
function audioload() {
    audioloaded++;
    if( audioloaded == 2 ) {
        document.body.classList.add( 'loaded' );
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Hearthstone Card CSS 3D Click/Drag"
Bootstrap 3.0.0 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"Hearthstone Card CSS 3D Click/Drag" Bootstrap 3.0.0 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"Hearthstone Card CSS 3D Click/Drag"
Bootstrap 3.0.0 Snippet by harunpehlivan