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

• #6902 [pod]Diablo őstag Carasc0 #6901

  Új Válasz 2017-01-27 00:00:33 #6902

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  [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