<template>
<section>
<div class="flip-container">
<div class="cards" :class="{ flipped: isFlipped }">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<button @click="flipCard">Click me</button>
</section>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
export default defineComponent({
name: "customers-listing",
components: {
},
setup() {
const isFlipped = ref(false);
const flipCard = () => {
isFlipped.value = !isFlipped.value;
};
return {
isFlipped,
flipCard,
};
},
});
</script>
<style scoped>
.card {
backface-visibility: hidden;
position: absolute;
width: 100%;
height: 100%;
}
.flip-container {
width:100%;
height:100%;
position: relative;
perspective: 1000px;
}
.cards {
width: 100%;
height: 100%;
position: absolute;
transition: transform 1s;
transform-style: preserve-3d;
transform-origin: 50% 50%;
}
.cards div {
display: block;
height: 100%;
width: 100%;
position: absolute;
backface-visibility: hidden;
}
.cards .front {
background: red;
background-image: url(http://www.pipubs.com/wp-content/uploads/2013/12/club-girls-dancing.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.cards .back {
background: blue;
transform: rotateY(180deg);
background-image: url(https://media.giphy.com/media/7TM8kWy04HzcA/giphy.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.cards.flipped {
transform: rotateY(180deg);
}
</style>```
