Hirdetés

Keresés

Új hozzászólás Aktív témák

  • [pod]Diablo

    őstag

    válasz Carasc0 #6901 üzenetére

    Bocsi, nem volt most idom felolteni egy kulon file-ba,itt van a kód egészbe, csak arra figyelj hogy .php-fájlként mentsd el ne .html-ként.A képeket rakd egy mappába a file-al, és nevezd el őket card1.png-től card25.png-ig.
    <style>
    .flip-table li{
    position:relative;
    display:inline-block;
    list-style-type:none;
    }
    .flip-container {
    height: 425px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
    transform: perspective(1000px);
    transform-style: preserve-3d;
    }
    .flip-container img{
    width: 100%;
    height: auto;
    }
    .flip-container.hover .back {
    transform: rotateY(0deg);
    }
    .flip-container.hover .front {
    transform: rotateY(180deg);
    }
    .flip-container, .front, .back {
    width: 300px;
    }
    .flipper {
    position: relative;
    transform: perspective(1000px);
    transform-style: preserve-3d;
    transition: all 0.6s ease 0s;
    }
    .front, .back {
    backface-visibility: hidden;
    left: 0;
    position: absolute;
    z-index: 1;
    top: 0;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transition: all 0.6s ease 0s;
    }
    .front {
    transform: rotateY(0deg);
    z-index: 2;
    }
    .back {
    transform: rotateY(-180deg);
    }
    </style>
    <p>Kattints a kártya megjelenítéséhez!</p>
    <ul class="flip-table">
    <?php
    $numbers = range(1, 25);
    shuffle($numbers);
    for($i=0;$i<25;$i++){
    ?>
    <li class="flip-container">
    <div class="flipper">
    <div class="front">
    <img src="/back.png">
    </div>
    <div class="back">
    <img src="/card<?=$numbers[$i];?>.png">
    </div>
    </div>
    </li>
    <?php }?>
    </ul>
    <script>
    $('.flip-container').click(function() {
    $(this).toggleClass('hover');
    });
    </script>

Új hozzászólás Aktív témák