CSS3多个变换：translate（）和scale（）

我发现了如何应用多个转换，但我想知道如何更好地控制它们

#框{
宽度：100px；
高度：100px；
字体系列：“Arial”；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：白色；
背景色：红色；
边界半径：25%；
过渡：0.5s缓进缓出；
}
#框：悬停{
变换：缩放（2，2）平移（25px，25px）；
}

Text

我如何改变它，使div的顶部和左侧不会向上和向左移动

首先停止移动它…并指定变换原点的位置：

#框{
宽度：100px；
高度：100px；
字体系列：“Arial”；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：白色；
背景色：红色；
边界半径：25%；
过渡：0.5s缓进缓出；
变换原点：左上；/*将其添加到*/
}
#框：悬停{
变换：缩放（2，2）；/*此处不平移*/
}

Text