transform属性中origin原点的取值

文章目录

1. 1. 取值1 :
2. 2. 取值2 :
3. 3. 取值3 :
4. 4. 取值4 :
5. 5. 取值5 :
6. 6. 取值6 :
7. 7. 取值7 :
8. 8. 取值8 :
9. 9. 取值9 :
10. 10. CSS变换中的旋转rotate()、缩放scale()、和倾斜skew()，都可以通过transform:origin属性来改变元素对象的原点位置；
11. 11. translate()始终根据元素对象中心点进行位移。

取值1 :

transform-origin: center; // 或 center center,或 50%,或 50% 50%

原点在元素的正中心!

取值2 :

transform-origin: top; // 或 top center,或 50% 0

原点在元素顶部的中间！

取值3 :

transform-origin: right; // 或 right center,或 center right,或 100%,或 100% 50%

原点在元素右边的中间！

取值4 :

transform-origin: bottom; // 或 bottom center,或 center bottom,或 50% 100%

原点在元素底部的中间！

取值5 :

transform-origin: left; // 或 left center,或 center left,或 0, 或 0 50%

原点在元素左边的中间！

取值6 :

transform-origin: left top; // 或 left top,或 0 0

原点在元素左上角！

取值7 :

transform-origin: right top; // 或 top right,或 100% 0

原点在元素右上角！

取值8 :

transform-origin: right bottom; // 或 bottom right,或 100% 100%

原点在元素右下角！

取值9 :

transform-origin: left bottom;// 或 bottom left,或 0 100%

原点在元素左下角！

CSS变换中的旋转rotate()、缩放scale()、和倾斜skew()，都可以通过transform:origin属性来改变元素对象的原点位置；

translate()始终根据元素对象中心点进行位移。