css图片旋转不改变顶端位置

css图片旋转不改变顶端位置

css3可以设置元素旋转角度,从而得到不一样的形状以及视觉感受。今天就为大家介绍一下如何实现图片旋转不改变顶端位置的方法。

(相关课程推荐:css视频教程

1、用两个一样的div进行对比,这是基础的div代码。

2、这是没有旋转的div,接着我们只给灰蓝色的div设置旋转,好明确知道旋转中心点是什么。

3、给灰蓝色div设置就是使用.t类名,然后用到了transform,接着就是rotate了。注意角度用的是deg,这里设置旋转45度。

4、接着看下对比,灰蓝色的div已经旋转了,并且旋转的中心点默认是div的正中心。

5、而如果我们要设置旋转的中心点可以用到transform-origin这个属性,如图所示,设置旋转中心为left top,意思是以左上角为旋转中心。

6、这时候旋转中心改变了,变成了左上了,顶端位置没有改变。

本文来自css答疑栏目,欢迎学习!

以上就是css图片旋转不改变顶端位置的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读