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