文章目录
  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 :

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

原点在元素的正中心!

origin

取值2 :

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

原点在元素顶部的中间!

origin

取值3 :

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

原点在元素右边的中间!

origin

取值4 :

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

原点在元素底部的中间!

origin

取值5 :

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

原点在元素左边的中间!

origin

取值6 :

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

原点在元素左上角!

origin

取值7 :

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

原点在元素右上角!

origin

取值8 :

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

原点在元素右下角!

origin

取值9 :

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

原点在元素左下角!

origin

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

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

文章目录
  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()始终根据元素对象中心点进行位移。