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

# transform-origin 的属性值

名称

兼容性

描述

top

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

left

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

right

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

bottom

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

center

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

# 默认值

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

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

# 示例

hello uni-app x

Template

Script

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



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