transform是css3属性。

有时候UI给的原型图是图片旋转出来的,而作为前端应该怎样取使用旋转还原原型图呢。

transform:scale(0.5)  缩放0.5倍

transform:rotate(90deg) transform:rotate(-270deg)  顺时针旋转90°

transform:rotateX(90deg)沿x轴旋转90度

transform:rotateY(180deg)沿y轴旋转180度  通常为镜面翻转

<template>
	<view>
		<image class="image1" src="../../static/tujidan.png" mode=""></image>

		<image class="image2" src="../../static/tujidan.png" mode=""></image>
	</view>
</template>
<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>
<style scoped>
.image1 {
	width: 600rpx;
	height: 300rpx;

	/* 镜像翻转180° */
	transform: rotateY(180deg);
}
.image2 {
	width: 600rpx;
	height: 300rpx;
	margin-top: 200rpx;

	/* 顺时针旋转90° */
	transform: rotate(90deg);
}
</style>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐