<template>
  <scroll-view class="page">
    <view class="trace">
      <view class="base reserve">
        <text class="reserve-text">rotate(20deg)</text>
        <text class="reserve-text">转变前位置</text>
      </view>
      <view class="base reserve">
        <text class="reserve-text">rotateX(50deg)</text>
        <text class="reserve-text">转变前位置</text>
      </view>
      <view class="base reserve">
        <text class="reserve-text">rotateY(50deg)</text>
        <text class="reserve-text">转变前位置</text>
      </view>
      <view class="base reserve">
        <text class="reserve-text">rotateZ(50deg)</text>
        <text class="reserve-text">转变前位置</text>
      </view>
      <view class="base reserve">
        <text class="reserve-text">rotateX(180deg)</text>
        <text class="reserve-text">转变前位置</text>
      </view>
      <view class="base reserve">
        <text class="reserve-text">rotateY(180deg)</text>
        <text class="reserve-text">转变前位置</text>
      </view>
    </view>

    <view class="base transform" style="transform: rotate(20deg)">
      <text>rotate(20deg)</text>
      <text>转变后位置</text>
    </view>
    <view class="base transform" style="transform: rotateX(50deg)">
      <text>rotateX(50deg)</text>
      <text>转变后位置</text>
    </view>
    <view class="base transform" style="transform: rotateY(50deg)">
      <text>rotateY(50deg)</text>
      <text>转变后位置</text>
    </view>
    <view class="base transform" style="transform: rotateZ(50deg)">
      <text>rotateZ(50deg)</text>
      <text>转变后位置</text>
    </view>
    <view class="base transform" style="transform: rotateX(180deg)">
      <text>rotateX(180deg)</text>
      <text>转变后位置</text>
    </view>
    <view class="base transform" style="transform: rotateY(180deg)">
      <text>rotateY(180deg)</text>
      <text>转变后位置</text>
    </view>
  </scroll-view>
</template>

<style>
  .page {
    flex: 1;
    align-items: center;
  }

  .trace {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    align-items: center;
  }

  .base {
    margin: 10px;
    width: 150px;
    height: 150px;
    align-items: center;
    justify-content: center;
  }

  .reserve {
    border: 1px dotted #588;
    background-color: #ddd;
  }

  .reserve-text {
    color: #ccc;
  }

  .transform {
    border: 1px solid #00f;
    background-color: rgba(0, 255, 255, 0.5);
  }
</style>