在 CSS 中,我们可以通过一些属性来实现对图片的定位和旋转。下面介绍了 6 个常用的属性。img { position: absolute; top: 0; left: 0; margin: aut
在 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
属性可以实现旋转同时放大图片。
粉丝
0
关注
0
收藏
0