# transform property

Content coming soon...

Visit our repository (opens new window) and raise an issue (opens new window) if you want to contribute. Thanks you for your collaboration

Transform options on a Quick App

(Example code)

# Example

<template>
  <div class="container">
    <div class="item-container">
      <div class="transform-container row-center column-center">
        <div class="transform-item" style="transform: rotate({{rotateNum}}deg) rotateX({{rotateXNum}}deg) rotateY({{rotateYNum}}deg) translateX({{translateXNum}}px) translateY({{translateYNum}}px) scale({{scaleNum}}) scaleX({{scaleXNum}}) scaleY({{scaleYNum}});"></div>
      </div>
    </div>
    <list class="mlr-container btn-list">
      <list-item type="btn" class="btn-item">
        <text class="btn-transparent" onclick="rotate">rotate</text>
      </list-item>
      <list-item type="btn" class="btn-item">
        <text class="btn-transparent" onclick="rotateX">rotateX</text>
      </list-item>
      <list-item type="btn" class="btn-item">
        <text class="btn-transparent" onclick="rotateY">rotateY</text>
      </list-item>
      <list-item type="btn" class="btn-item">
        <text class="btn-transparent" onclick="translate">translate</text>
      </list-item>
      <list-item type="btn" class="btn-item">
        <text class="btn-transparent" onclick="translateX">translateX</text>
      </list-item>
      <list-item type="btn" class="btn-item">
        <text class="btn-transparent" onclick="translateY">translateY</text>
      </list-item>
      <list-item type="btn" class="btn-item">
        <text class="btn-transparent" onclick="scale">scale</text>
      </list-item>
      <list-item type="btn" class="btn-item">
        <text class="btn-transparent" onclick="scaleX">scaleX</text>
      </list-item>
      <list-item type="btn" class="btn-item">
        <text class="btn-transparent" onclick="scaleY">scaleY</text>
      </list-item>
    </list>
  </div>
</template>

<style lang="sass">
  .transform-container {
    height: 400px;
  }
  .transform-item {
    width: 100px;
    height: 100px;
    background-color: #00bfff;
    border: 2px solid #000000;
  }
  .btn-list {
    columns: 3;
    .btn-item {
      height: 140px;
      align-items: center;
      justify-content: center;
    }
  }
</style>

<script>
  module.exports = {
    public: {
      rotateNum: 0,
      rotateXNum: 0,
      rotateYNum: 0,
      translateXNum:0,
      translateYNum:0,
      scaleXNum:1,
      scaleYNum:1,
      scaleNum:1,
    },
    rotate() {
      this.rotateNum = (this.rotateNum + 20) % 360;
    },
    rotateX() {
      this.rotateXNum = (this.rotateXNum + 20) % 360;
    },
    rotateY() {
      this.rotateYNum = (this.rotateYNum + 20) % 360;
    },
    translateX(){
      this.translateXNum = this.translateXNum + 10;
    },
    translateY(){
      this.translateYNum = this.translateYNum + 10;
    },
    translate(){
      this.translateYNum = this.translateYNum - 10;
      this.translateXNum = this.translateXNum - 10;
    },
    scale(){
      this.scaleXNum = this.scaleXNum - 0.1;
      this.scaleYNum = this.scaleYNum - 0.1;
    },
    scaleX(){
      this.scaleXNum = this.scaleXNum + 0.1;
    },
    scaleY(){
      this.scaleYNum = this.scaleYNum + 0.1;
    }
  }
</script>