Material Vue.js 3D Card

index.html

<template id='v-card-content'>
  <div id="3d-container" class="3d-container">
    <iframe  src="http://threejs.org/examples/webgl_materials_bumpmap_skin.html"></iframe>
  </div>
</template>

<!-- material card template for vue.js -->
<template id="v-card">
  <div class="widget card">
    <div class="card-content">
      <span class="card-title grey-text text-darken-4">{{title}}</span>
      <v-card-content></v-card-content>
    </div>
    <div class="card-action">
      <a href="//materializecss.com">Documentation</a>
      <a href='//github.com/Grace'>GitHub</a>
    </div>
  </div>
</template>

<div id="demo">
  <v-card title="Material Vue.js 3D Card" content='Example'>
  </v-card>
</div>

Material Vue.js 3D Card.markdown

Material Vue.js 3D Card

Material design card implemented using Vue.js

A Pen by Grace on CodePen.

License.

script.js

// define
var Card = Vue.extend({
  props: ['title'],
  template: '#v-card'
});

var CardContent = Vue.extend({
  template: '#v-card-content'
});

// Register MaterialCard Component
Vue.component('v-card', Card);
Vue.component('v-card-content', CardContent);

// Root Instance
var vm = new Vue({
  el: '#demo'
});

$('.widget').draggable();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

style.css

.widget {
  width: 650px;
  height: 550px;
}

#3d-container {
  width: 90%;
  height: 500px;
}

iframe {
  width: 90%;
  height: 400px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css" rel="stylesheet" />