transform学习

htmledit_views">

知识点讲解：

`scale`

是 CSS 的 transform 属性的一部分，用于对元素进行比例缩放。

transform: scale(sx);
transform: scale(sx, sy);
/* 
sx：表示元素在 水平轴（X轴）的缩放比例。
sy（可选）：表示元素在 垂直轴（Y轴）的缩放比例。
如果 sy 省略，则默认等于 sx（即均匀缩放）
应用：
*//* 水平和垂直均匀缩放至 150% */
transform: scale(1.5);/* 仅水平缩放至 200%，垂直缩放至 50% */
transform: scale(2, 0.5);

`transform-origin`

用于transform 设置缩放的基准点（即元素的“中心点”）

transform-origin: x y;
/* 
x：水平位置，可使用 px、百分比（%）、或关键词（left, center, right）。
y：垂直位置，可使用 px、百分比（%）、或关键词（top, center, bottom）。
默认值：*/ 
transform-origin: 50% 50%; /* 元素中心点 */
/*应用：*/
/* 基于左上角进行缩放 */
transform-origin: 0 0;/* 基于右下角进行缩放 */
transform-origin: 100% 100%;/* 基于坐标点 (50px, 50px) 缩放 */
transform-origin: 50px 50px;

组合使用

transform 结合旋转（rotate）、位移（translate）、倾斜（skew）。

/* 缩放 1.5 倍，并旋转 45 度 */
transform: scale(1.5) rotate(45deg);/* 缩放后向右移动 100px */
transform: scale(0.8) translate(100px, 0);

动画效果

通过 transition 属性，给 scale 增加平滑过渡效果。

效果：

<template><div class="box"></div>
</template><script setup></script><style scoped>
.box {width: 100px;height: 100px;background-color: #4caf50;transition: transform 0.3s ease;
}.box:hover {transform: scale(1.5);
}
</style>

实践案例1-基于左右上角缩放：

效果：

<template><div class="container"><!-- 红色圆点标识在画布的左上角 --><div class="dot fixed-left-top"></div><!-- 左上角盒子 --><div class="box-wrapper"><div class="box" :class="{ 'scale-left-top': isLeftScaled }">缩放到左上角</div><button @click="toggleLeftScale">左上缩放</button></div><!-- 红色圆点标识在画布的右上角 --><div class="dot fixed-right-top"></div><!-- 右上角盒子 --><div class="box-wrapper"><div class="box" :class="{ 'scale-right-top': isRightScaled }">缩放到右上角</div><button @click="toggleRightScale">右上缩放</button></div></div>
</template><script setup>
import { ref } from 'vue';// 左上角缩放状态
const isLeftScaled = ref(false);// 右上角缩放状态
const isRightScaled = ref(false);// 切换左上角盒子的缩放状态
const toggleLeftScale = () => {isLeftScaled.value = !isLeftScaled.value;
};// 切换右上角盒子的缩放状态
const toggleRightScale = () => {isRightScaled.value = !isRightScaled.value;
};
</script><style scoped>
.container {display: flex;justify-content: space-between;align-items: flex-start;height: 100vh;padding: 20px;background-color: #f5f5f5;position: relative;/* 为固定红点提供定位上下文 */
}.box-wrapper {display: flex;flex-direction: column;align-items: center;gap: 10px;
}.box {width: 200px;height: 200px;background-color: #4caf50;color: white;font-size: 18px;font-weight: bold;display: flex;justify-content: center;align-items: center;border: 2px solid #333;transition: transform 0.3s ease, transform-origin 0.3s ease;
}/* 固定红色圆点标识 */
.dot {width: 10px;height: 10px;background-color: red;border-radius: 50%;position: absolute;z-index: 1;
}/* 左上角红点固定在画布左上角 */
.fixed-left-top {top: 20px;left: 20px;
}/* 右上角红点固定在画布右上角 */
.fixed-right-top {top: 20px;right: 20px;
}/* 
左上角：transform-origin: 0 0;
左下角：transform-origin: 0 100%;
右上角：transform-origin: 100% 0;
右下角：transform-origin: 100% 100%;*/
/* 左上角缩放 */
.scale-left-top {transform-origin: 0 0;transform: scale(0.7);
}/* 右上角缩放 */
.scale-right-top {transform-origin: 100% 0;transform: scale(0.7);
}button {padding: 10px 15px;font-size: 16px;cursor: pointer;background-color: #007bff;color: white;border: none;border-radius: 5px;transition: background-color 0.3s;
}button:hover {background-color: #0056b3;
}
</style>

实践案例2-悬浮动态缩放：

<template><div class="box"></div>
</template><script setup></script><style scoped>
.box {width: 100px;height: 100px;background-color: green;transition: transform 0.3s ease;
}.box:hover {transform: scale(1.2);/* 悬浮时缩放 1.2 倍 */
}
</style>

实践案例3-非均匀缩放：

<template><div class="box"></div>
</template><script setup></script><style scoped>
.box {width: 100px;height: 100px;background-color: orange;transform: scale(2, 0.5);/* 水平方向 2 倍，垂直方向 0.5 倍 */
}
</style>