Added Card component and pose animation

src/components/Card.vue

@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <div class="area">
+            <Box class="card" :pose="isVisible ? 'visible' : 'hidden'">
+                ?
+            </Box>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import posed from "vue-pose";
+
+@Component({
+    components: {
+        Box: posed.div({
+            visible: { rotateY: 180, transition: { duration: 300 } },
+            hidden: { rotateY: 0, transition: { duration: 300 } }
+        })
+    }
+})
+export default class CardComponent extends Vue {
+    private isVisible: boolean;
+    public data() {
+        return { isVisible: this.isVisible };
+    }
+    public mounted() {
+        setInterval(() => {
+            this.isVisible = !this.isVisible;
+        }, 1000);
+    }
+}
+</script>
+
+<style scoped lang="less">
+.area {
+  transform-style: preserve-3d;
+  perspective: 500px;
+  width: 100px;
+  height: 100px;
+  margin:0 auto;
+}
+
+.card {
+  width: 100px;
+  height: 100px;
+  background: #14D790;
+  box-shadow: 0 0 5px 0.5px #444;
+  color:#fff;
+  font-size: 90px;
+  text-align: center;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background: #54E365;
+    display: block;
+    margin: 0 auto;
+}
+
+</style>