uni-app
uni-app x
uniCloud
HBuilder X
uni 小程序 sdk
uni-ad广告
开发者服务
uni-app x
uni-app
uni-app x
uniCloud
HBuilder X
uni 小程序 sdk
uni-ad广告
开发者服务
简体中文
CSS
transform-origin
uni-app x 兼容性
语法
值限制
transform-origin 的属性值
默认值
示例
参见

# transform-origin

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

# uni-app x 兼容性

Web Android iOS HarmonyOS HarmonyOS(Vapor)
4.0 3.9 4.11 4.61 5.0

# 语法

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

# 值限制

  • length
  • 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分支示例另见

扫码体验（手机浏览器跳转到App直达页）

示例

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view>
      <view ref="transformView" class="view" @click="changetransform"></view>

      <view class="text-container">
        <text class="uni-title-text">text 组件 transform-origin ：</text>
        <text class="uni-subtitle-text">点击下方 text 组件，不同 transform-origin 值（60px 30px、100% 0%、10px 10px）对 translate、scale、rotate 变换的影响</text>
        <text ref="textTransformView" class="text-view" @click="changeTextTransform">点击 text 测试 transform-origin</text>
      </view>

      <view class="image-container">
        <text class="uni-title-text">image 组件 transform-origin ：</text>
        <text class="uni-subtitle-text">点击下方 image 组件，不同 transform-origin 值（60px 60px、100% 0%、10px 10px）对 translate、scale、rotate 变换的影响</text>
        <image ref="imageTransformView" class="image-view" @click="changeImageTransform" src="/static/test-image/logo.png"></image>
      </view>

      <view class="uni-common-mt">
        <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取 transform-origin </text>
      </view>

      <view class="test-container">
        <view class="test-item">
          <text class="uni-subtitle-text">view 组件</text>
          <text class="uni-info">设置值: {{transformOrigin}}</text>
          <text class="uni-info">获取值: {{transformOriginActual}}</text>
          <view class="test-box">
            <view ref="viewRefDynamic" class="common-image" :style="{ transformOrigin: transformOrigin, transform: 'rotate(45deg)' }">
              <text style="font-size: 12px;">view</text>
            </view>
          </view>
        </view>

        <view class="test-item">
          <text class="uni-subtitle-text">text 组件</text>
          <text class="uni-info">设置值: {{transformOrigin}}</text>
          <text class="uni-info">获取值: {{transformOriginActualText}}</text>
          <view class="test-box">
            <text ref="textRefDynamic" class="common-text" :style="{ transformOrigin: transformOrigin, transform: 'rotate(45deg)' }">text</text>
          </view>
        </view>

        <view class="test-item">
          <text class="uni-subtitle-text">image 组件</text>
          <text class="uni-info">设置值: {{transformOrigin}}</text>
          <text class="uni-info">获取值: {{transformOriginActualImage}}</text>
          <view class="test-box">
            <image ref="imageRefDynamic" class="common-image" :style="{ transformOrigin: transformOrigin, transform: 'rotate(45deg)' }" src="/static/test-image/logo.png"></image>
          </view>
        </view>
      </view>

      <view class="test-container">
        <view class="test-item">
          <text class="uni-subtitle-text">view 组件拍平</text>
          <text class="uni-info">设置值: {{transformOrigin}}</text>
          <text class="uni-info">获取值: {{transformOriginActualFlat}}</text>
          <view class="test-box">
            <view ref="viewRefDynamicFlat" class="common-image" :style="{ transformOrigin: transformOrigin, transform: 'rotate(45deg)' }" flatten>
              <text style="font-size: 12px;" flatten>view</text>
            </view>
          </view>
        </view>

        <view class="test-item">
          <text class="uni-subtitle-text">text 组件拍平</text>
          <text class="uni-info">设置值: {{transformOrigin}}</text>
          <text class="uni-info">获取值: {{transformOriginActualTextFlat}}</text>
          <view class="test-box">
            <text ref="textRefDynamicFlat" class="common-text" :style="{ transformOrigin: transformOrigin, transform: 'rotate(45deg)' }" flatten>text</text>
          </view>
        </view>

        <view class="test-item">
          <text class="uni-subtitle-text">image 组件拍平</text>
          <text class="uni-info">设置值: {{transformOrigin}}</text>
          <text class="uni-info">获取值: {{transformOriginActualImageFlat}}</text>
          <view class="test-box">
            <image ref="imageRefDynamicFlat" class="common-image" :style="{ transformOrigin: transformOrigin, transform: 'rotate(45deg)' }" src="/static/test-image/logo.png" flatten></image>
          </view>
        </view>
      </view>

      <view class="uni-common-mt uni-common-mb">
        <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
        <enum-data :items="transformOriginEnum" title="transform-origin 枚举值" @change="radioChangeTransformOrigin" :compact="true"></enum-data>
        <input-data :defaultValue="transformOrigin" title="transform-origin 自定义值" type="text" @confirm="inputChangeTransformOrigin"></input-data>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup lang="uts">
  import { ItemType } from '@/components/enum-data/enum-data-types'

  const transformView = ref(null as UniElement | null)
  const textTransformView = ref(null as UniElement | null)
  const imageTransformView = ref(null as UniElement | null)
  const count = ref(0)
  const textCount = ref(0)
  const imageCount = ref(0)

  const changetransform = () => {
    const element = transformView.value

    if (count.value == 0) {
      element?.style.setProperty("transform-origin", "60px 60px")
      element?.style.setProperty("transform", "scale(1)")

      nextTick(() => {
        const originActual = element?.style.getPropertyValue("transform-origin")
        const transformActual = element?.style.getPropertyValue("transform")
      })
    }
    else if (count.value == 1) {
      element?.style.setProperty("transform-origin", "100% 0%")
      element?.style.setProperty("transform", "rotate(-20deg)")

      nextTick(() => {
        const originActual = element?.style.getPropertyValue("transform-origin")
        const transformActual = element?.style.getPropertyValue("transform")
      })
    }

    count.value++
  }

  const changeTextTransform = () => {
    const element = textTransformView.value

    if (textCount.value == 0) {
      element?.style.setProperty("transform-origin", "60px 30px")
      element?.style.setProperty("transform", "translate(50px, 50px) scale(1.5)")

      nextTick(() => {
        const originActual = element?.style.getPropertyValue("transform-origin")
        const transformActual = element?.style.getPropertyValue("transform")
      })
    }
    else if (textCount.value == 1) {
      element?.style.setProperty("transform-origin", "100% 0%")
      element?.style.setProperty("transform", "rotate(-20deg)")

      nextTick(() => {
        const originActual = element?.style.getPropertyValue("transform-origin")
        const transformActual = element?.style.getPropertyValue("transform")
      })
    }
    else {
      element?.style.setProperty("transform-origin", "10px 10px")
      element?.style.setProperty("transform", "scale(1)")

      nextTick(() => {
        const originActual = element?.style.getPropertyValue("transform-origin")
        const transformActual = element?.style.getPropertyValue("transform")
      })
      textCount.value = -1
    }

    textCount.value++
  }

  const changeImageTransform = () => {
    const element = imageTransformView.value

    if (imageCount.value == 0) {
      element?.style.setProperty("transform-origin", "60px 60px")
      element?.style.setProperty("transform", "translate(50px, 50px) scale(2)")

      nextTick(() => {
        const originActual = element?.style.getPropertyValue("transform-origin")
        const transformActual = element?.style.getPropertyValue("transform")
      })
    }
    else if (imageCount.value == 1) {
      element?.style.setProperty("transform-origin", "100% 0%")
      element?.style.setProperty("transform", "rotate(-20deg)")

      nextTick(() => {
        const originActual = element?.style.getPropertyValue("transform-origin")
        const transformActual = element?.style.getPropertyValue("transform")
      })
    }
    else {
      element?.style.setProperty("transform-origin", "10px 10px")
      element?.style.setProperty("transform", "scale(1)")

      nextTick(() => {
        const originActual = element?.style.getPropertyValue("transform-origin")
        const transformActual = element?.style.getPropertyValue("transform")
      })
      imageCount.value = -1
    }

    imageCount.value++
  }

  const transformOrigin = ref('50% 50%')
  const transformOriginActual = ref('')
  const transformOriginActualText = ref('')
  const transformOriginActualImage = ref('')
  const transformOriginActualFlat = ref('')
  const transformOriginActualTextFlat = ref('')
  const transformOriginActualImageFlat = ref('')
  const viewRefDynamic = ref(null as UniElement | null)
  const textRefDynamic = ref(null as UniTextElement | null)
  const imageRefDynamic = ref(null as UniImageElement | null)
  const viewRefDynamicFlat = ref(null as UniElement | null)
  const textRefDynamicFlat = ref(null as UniTextElement | null)
  const imageRefDynamicFlat = ref(null as UniImageElement | null)

  const transformOriginEnum: ItemType[] = [
    { value: 0, name: '' },
    { value: 1, name: '50% 50%' },
    { value: 2, name: '0% 0%' },
    { value: 3, name: '100% 0%' },
    { value: 4, name: '0% 100%' },
    { value: 5, name: '100% 100%' },
    { value: 6, name: '10px 10px' },
    { value: 7, name: '60px 60px' }
  ]

  const getPropertyValues = () => {
    transformOriginActual.value = viewRefDynamic.value?.style.getPropertyValue('transform-origin') ?? ''
    transformOriginActualFlat.value = viewRefDynamicFlat.value?.style.getPropertyValue('transform-origin') ?? ''
    transformOriginActualText.value = textRefDynamic.value?.style.getPropertyValue('transform-origin') ?? ''
    transformOriginActualTextFlat.value = textRefDynamicFlat.value?.style.getPropertyValue('transform-origin') ?? ''
    transformOriginActualImage.value = imageRefDynamic.value?.style.getPropertyValue('transform-origin') ?? ''
    transformOriginActualImageFlat.value = imageRefDynamicFlat.value?.style.getPropertyValue('transform-origin') ?? ''
  }

  const changeTransformOrigin = (value: string) => {
    transformOrigin.value = value
    viewRefDynamic.value?.style.setProperty('transform-origin', value)
    viewRefDynamicFlat.value?.style.setProperty('transform-origin', value)
    textRefDynamic.value?.style.setProperty('transform-origin', value)
    textRefDynamicFlat.value?.style.setProperty('transform-origin', value)
    imageRefDynamic.value?.style.setProperty('transform-origin', value)
    imageRefDynamicFlat.value?.style.setProperty('transform-origin', value)
    // 使用 nextTick 确保样式已应用后再获取值
    nextTick(() => {
      getPropertyValues()
    })
  }

  const radioChangeTransformOrigin = (index: number) => {
    const selectedItem = transformOriginEnum.find((item): boolean => item.value === index)
    if (selectedItem != null) {
      changeTransformOrigin(selectedItem.name)
    }
  }

  const inputChangeTransformOrigin = (value: string) => {
    changeTransformOrigin(value)
  }

  onReady(() => {
    getPropertyValues()
  })
</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;
  }

  .text-view {
    width: 200px;
    height: 70px;
    padding: 10px;
    margin: 20px;
    font-size: 16px;
    transform-origin: 10px 10px;
    background-color: aqua;
    transform: scale(1);
    border-width: 1px;
    border-color: black;
    border-style: solid;
    text-align: center;
  }

  .image-view {
    width: 100px;
    height: 100px;
    margin: 20px;
    transform-origin: 10px 10px;
    transform: scale(1);
    border-width: 1px;
    border-color: black;
    border-style: solid;
  }

  .text-container {
    width: 400px;
    height: 280px;
    margin-top: 200px;
  }

  .image-container {
    width: 400px;
    height: 300px;
  }

  .common-text {
    width: 50px;
    height: 50px;
    background-color: green;
    font-size: 12px;
    color: white;
  }

  .common-image {
    width: 50px;
    height: 50px;
    background-color: green;
  }

  .test-container {
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
  }

  .test-item {
    flex: 1;
    margin: 0 5px;
  }

  .test-box {
    width: 100%;
    height: 120px;
    background-color: gray;
  }

</style>

# 参见

本页导读
transform-origin
uni-app x 兼容性
语法
值限制
transform-origin 的属性值
默认值
示例
参见