css中transform的scale补充负值示例

pages/CSS/transform/scale.uvue

@@ -16,6 +16,14 @@
           <text class="reserve-text">scale(0.8,0.8)</text>
           <text class="reserve-text">转变前位置</text>
         </view>
+        <view class="base reserve">
+          <text class="reserve-text">scaleX(-1)</text>
+          <text class="reserve-text">转变前位置</text>
+        </view>
+        <view class="base reserve">
+          <text class="reserve-text">scaleY(-1)</text>
+          <text class="reserve-text">转变前位置</text>
+        </view>
       </view>
 
       <view class="base transform" style="transform: scaleX(0.6)">
@@ -29,11 +37,19 @@
       <view class="base transform" style="transform: scale(1.2,1.2)">
         <text>scale(1.2,1.2)</text>
         <text>转变后位置</text>
+      </view>
+      <view class="base transform" style="transform: scaleX(-1)">
+        <text>scaleX(-1)</text>
+        <text>转变后位置</text>
+      </view>
+      <view class="base transform" style="transform: scaleY(-1)">
+        <text>scaleY(-1)</text>
+        <text>转变后位置</text>
       </view>
 
-      <view class="base">
+      <view class="base" style="width:auto">
         <text>通过scaleY(0.5)实现0.5px的线</text>
-        <view style="width: 150px; height: 1px; background-color: #000; transform: scaleY(0.5)"></view>
+        <view style="width: 200px; height: 1px; background-color: #000; transform: scaleY(0.5)"></view>
       </view>
     </view>
   <!-- #ifdef APP -->