rotate.uvue

<template>
<scroll-view class="page" scroll-y="true">

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

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

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