<div id="app">
  <h2>CSS3 Perspective Playground</h2>
  <main>
    <section class="settings">
      <div class="settings-container">
        <label for="">
           perspective: {{perspective}}px;<br>
           <input type="range" min="0" max="999"
                  v-model="perspective"/>
           </label>
        <br>
        <label for="">
           rotateX: {{rotateX}}deg; <br>
           <input type="range" min="-180" max="180"
                  v-model="rotateX"/>
         </label>
        <br>
        <label for="">
           rotateY: {{rotateY}}deg; <br>
           <input type="range" min="-180" max="180"
                  v-model="rotateY"/>
         </label>
        <br>
        <label for="">
           rotateZ: {{rotateZ}}deg; <br>
           <input type="range" min="-180" max="180"
                  v-model="rotateZ"/>
         </label>
        <br>
        <label for="">
          transform-origin:{{transformOriginX }} {{transformOriginY}}; <br>
          <div class="transform-origin-radio-buttons">
            <div class="transform-origin-x">
          <label for="t-left">
            <input type="radio" name="transform-left" 
                   value="left" 
                   v-model="transformOriginX" id="t-left"/> left
          </label>
        <br>
        <label for="t-right">
            <input type="radio" name="transform-left" 
                   value="right" 
                   v-model="transformOriginX" id="t-right"/> right
          </label>
        <br>
        <label for="t-center">
            <input type="radio" name="transform-left" 
                   value="center" 
                   v-model="transformOriginX" id="t-center"/> center
          </label>
      </div>

      <div class="transform-origin-y">
        <label for="t-top">
            <input type="radio" name="transform-right" 
                   value="top" 
                   v-model="transformOriginY" id="t-top"/> top
          </label>
        <br>
        <label for="t-bottom">
            <input type="radio" name="transform-right" 
                   value="bottom" 
                   v-model="transformOriginY" id="t-bottom"/> bottom
          </label>
        <br>
        <label for="t-center2">
            <input type="radio" name="transform-right" 
                   value="center" 
                   v-model="transformOriginY" id="t-center2"/> center
          </label>
      </div>
</div>

</label>
</div>
</section>
<section class="output">
  <div class="box-container">
    <div class="box" :style="{ 
            transform: `perspective(${perspective}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`,
            transformOrigin:`${transformOriginX} ${transformOriginY}`
            
            }"></div>
  </div>
</section>
</main>
</div>
@import url("https://fonts.googleapis.com/css?family=Varela+Round");
html {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}
body {
  font-family: "Varela Round", sans-serif;
  color: #ddd;
  background: #343434;
}

h2 {
  color: #f38181;
  text-align: center;
  font-size: 40px;
  margin: 20px;
}
main {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 420px;
  max-width: 768px;
  margin: 0 auto;
  font-family: monospace, sans-serif;
  font-size: 16px;
}
main label:not(:last-child) {
  display: inline-block;
  margin-bottom: 10px;
}
main label input[type="range"] {
  display: inline-block;
  margin-top: 5px;
}
section.settings {
  width: 50%;
  z-index: 2;
}
.box-container {
  padding: 50px;
  border: 1px solid #f38181;
}
.box {
  width: 150px;
  height: 150px;
  background: #f38181;
}
.transform-origin-radio-buttons {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.transform-origin-x {
  margin-right: 10%;
}
View Compiled
new Vue({
  el: "#app",
  data: {
    perspective: 100,
    rotateX: 0,
    rotateY: 0,
    rotateZ: 0,
    transformOriginX: "center",
    transformOriginY: "center"
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js