EveryLike/pages/CSS/transform/transform-origin.uvue

<template>
  <view style="flex:1">
    <view ref="transformView" class="view" @click="changetransform"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      changetransform() {
        var element = this.$refs["transformView"] as UniElement | null

        if (this.count == 0) {
          element?.style.setProperty("transform-origin", "60px 60px")
          element?.style.setProperty("transform", "scale(1)")
        }
        else if (this.count == 1) {
          element?.style.setProperty("transform-origin", "100% 0%")
          element?.style.setProperty("transform", "rotate(-20deg)")
        }

        this.count++
      }
    }
  }
</script>

<style>
  .view {
    width: 100px;
    height: 100px;
    transform-origin: 10px 10px;
    background-color: aqua;
    transform: translate(50px, 50px) scale(2);
    border-width: 1px;
    border-color: black;
    border-style: solid;
  }
</style>