CSS----transform:rotate 旋转基本使用方法

 

 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>