transform.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view>
      <view class="baseStyle" style="transform: translateX(120%)"
        >translateX(120%)</view
      >
      <view class="baseStyle" style="transform: translateY(-30rpx)"
        >translateY(-30rpx)</view
      >
      <view class="baseStyle" style="transform: translate(120%, 50%)"
        >translate(120%,50%)</view
      >
      <view class="baseStyle" style="transform: scaleX(0.8)">scaleX(0.8)</view>
      <view class="baseStyle" style="transform: scaleY(0.8)">scaleY(0.8)</view>
      <view class="baseStyle" style="transform: scale(0.8, 0.8)"
        >scale(0.8,0.8)</view
      >
      <view class="baseStyle" style="transform: rotate(20deg)"
        >rotate(20deg)</view
      >
      <view class="baseStyle" style="transform: rotateX(50deg)"
        >rotateX(50deg)</view
      >
      <view class="baseStyle" style="transform: rotateY(50deg)"
        >rotateY(50deg)</view
      >
      <view class="baseStyle" style="transform: rotateZ(50deg)"
        >rotateZ(50deg)</view
      >
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script lang="ts">
export default {
  data() {
    return {}
  },
  methods: {},
}
</script>

<style>
.baseStyle {
  background-color: cadetblue;
  margin: 10rpx;
  width: 300rpx;
  height: 300rpx;
  align-items: center;
  flex: 1;
  justify-content: center;
}
</style>