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
·
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>
更多推荐
已为社区贡献5条内容
所有评论(0)