css6个图片定位旋转

在 CSS 中，我们可以通过一些属性来实现对图片的定位和旋转。下面介绍了 6 个常用的属性。

img {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  bottom: 0;
  right: 0;
  transform: rotate(45deg);
} 

1. position: absolute;属性可以让图片脱离文档流，可以自由定位。

img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
} 

2. position: relative;属性可以保留图片在文档流中的位置，可以通过设置 left 和 top 来实现定位。

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
} 

3. 同时设置 top: 50%; left: 50%; 属性可以将图片定位到页面中心。

img {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  bottom: 0;
  right: 0;
} 

4. 使用 margin: auto; 属性可以在实现定位的同时让图片水平居中。

img {
  position: relative;
  left: 50%;
  transform-origin: center bottom;
  transform: rotate(45deg);
} 

5. transform-origin: center bottom; 属性可以改变旋转的中心点，这里选择的是底边中心。

img {
  position: relative;
  left: 50%;
  transform-origin: center bottom;
  transform: scale(2) rotate(45deg);
} 

6. 组合使用 scale 属性可以实现旋转同时放大图片。