this is the card styling I need to change randomly on every card, properties I need to change on flip is transform, position and z-index.
<style>
.card-front {
backface-visibility: hidden;
left: 0px;
position: relative;
top: 0px;
transform: rotateX(0deg);
transform-style: preserve-3d;
width: 100%;
height: 100%;
z-index: 2;
transition: all 1.3s ease 0s;
}
.card-back {
backface-visibility: hidden;
left: 0px;
position: absolute;
top: 0px;
transform: rotateX(-180deg);
transform-style: preserve-3d;
width: 100%;
height: 100%;
transition: all 1.3s ease 0s;
}
</style>
this is one of the list items containing front and back cards which is going to flip.
<body>
<li>
<div class="react-card-flip" style="perspective: 1000px; z-index: auto">
<div id="card" class=" " style="position: relative; height: 100%; width: 100%">
<div class="react-card-front card-front front">
<span>
<img src="#" alt="Dummy Image" />
</span>
</div>
<div class="react-card-back card-back back">
<span>
<img src="#" alt="Dummy Image" />
</span>
</div>
</div>
</div>
</li>
</body>
I'm having a problem with an event in jquery which is going to invoke automatically and randomly on a list items with infinite time intervals, please help me out.
<script>
$('.react-card-flip').ready(function() {
$("li").trigger(function(){
var $li = $("li");
$li.eq(Math.floor(Math.random()*$li.length))
});
$("li .react-card-flipper > .card-front").css({
"backface-visibility": "hidden",
"position": "relative",
"transform": "rotateX(0deg)",
"z-index": "2",
"left": "0px",
"top": "0px",
"transform-style": "preserve-3d",
"width": "100%",
"height": "100%",
"transition": "all 1.3s ease 0s"
});
$(".react-card-flipper > .card-back").css({
"position": "absolute",
"transform": "rotateX(-180deg)",
"z-index": "1"
});
});
$("li .react-card-flipper > .card-front").css({"position": "absolute", "transform": "rotateX(-180deg)","z-index": "1"});
$(".react-card-flipper > .card-back").css({"position": "relative", "transform": "rotateX(0deg)", "z-index": "2"});
</script>
Aucun commentaire:
Enregistrer un commentaire