transform-origin 详解

transform-origin属性用于设置元素的变形基点位置。这个属性的值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。在没有设置transform-origin属性时，CSS变形操作默认以元素自身的中心点为基点进行变形。而设置了transform-origin属性之后，可以改变元素的基点位置，从而实现元素沿着某一基点进行旋转、位移等操作。

下面分三个方面介绍transform-origin属性的详解：
1. 通过设置scale(x,y)来对元素进行缩放变形，基点位置默认在元素的中心位置。
2. 通过设置scaleX()来在X轴（水平方向）缩放元素，基点位置同样在元素的中心位置。可以通过transform-origin属性来改变基点位置。
3. 通过设置scaleY()来在Y轴（垂直方向）缩放元素，基点位置同样在元素的中心位置。可以通过transform-origin属性来改变基点位置。

通过理解和使用transform-origin属性，我们可以更加灵活地控制元素的变形效果，实现各种动画效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [CSS3之transform-origin详解](https://blog.csdn.net/qq_32013641/article/details/89070248)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [css3的transform中scale缩放详解](https://download.csdn.net/download/weixin_38624437/14828334)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]