transform-origin

# transform-origin

transform-origin CSS 属性让你更改一个元素变形的原点。

# uni-app x 兼容性

Web	Android	iOS	HarmonyOS
4.0	3.9	4.11	4.61

# 语法

transform-origin: [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?;

示例源码如下，请查看 pre > code 标签中的内容

transform-origin: [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?;

# 值限制

length
length-function
percentage
enum

# transform-origin 的属性值

名称

兼容性

描述

top

相对于元素的顶部边缘进行变形

left

相对于元素的左侧边缘进行变形

right

相对于元素的右侧边缘进行变形

bottom

相对于元素的底部边缘进行变形

center

相对于元素的中心点进行变形

# 默认值

平台	默认值
uvue-app	50% 50%
uvue-web	50% 50% 0

注意：W3C 默认值为：50% 50% 0

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<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>

示例源码如下，请查看 pre > code 标签中的内容

<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>