translate.uvue

<template>
<scroll-view class="page">
	<view class="trace">
		<view class="base reserve">
			<text class="reserve-text">translateX(80%)</text>
			<text class="reserve-text">转变前位置</text>
		</view>
		<view class="base reserve">
			<text class="reserve-text">translateY(50px)</text>
			<text class="reserve-text">转变前位置</text>
		</view>
		<view class="base reserve">
			<text class="reserve-text">translate(-50%, 50%)</text>
			<text class="reserve-text">转变前位置</text>
		</view>
	</view>

	<view class="base transform" style="transform: translateX(80%)">
		<text>translateX(80%)</text>
		<text>转变后位置</text>
	</view>
	<view class="base transform" style="transform: translateY(50px)">
		<text>translateY(50px)</text>
		<text>转变后位置</text>
	</view>
	<view class="base transform" style="transform: translate(-50%, 50%)">
		<text>translate(-50%,50%)</text>
		<text>转变后位置</text>
	</view>
</scroll-view>
</template>

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

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