稻草日志分享:css3新增transform-origin转换的中心点如何设置

王亚兵7个月前 (10-06)HTML5CSS374

经过前面的分享我们应该对transform属性有了一定的认识,他可以控制页面元素的转换,也可以说是变形或者变换,而且我们知道了如何通过transform对元素进行移动和旋转。也就是我们设置translate和rotate的值。而且也简单的聊了一下他们的注意事项。今天我们来和大家聊一下转换中心点如何设置转换的中心点——transform-origin

在此之前,先回想一下我们昨天是怎样让我们的页面元素旋转的,肯定是通过rotate这个不用想。但是我们发现旋转都是以元素的中心点为中心进行旋转的。这个时候可能有人就想如果我们以元素的一个顶点作为中心点进行旋转可以吗?答案是肯定的,今天我们就来说下如何改变我们转换的中心点。

我们要知道transform-origin可以写两个值,第一个是x轴的位置,第二个是y轴的位置。我想大家应该都知道为什么会有这两个值,因为,一个点肯定是有x轴y轴两个坐标的。这两个坐标三红写法,他可以使用我们的方位名词,比如top,left,right,bottom,center。同样也可以设置数值,比如我们给它设置10px 10px。看一下会有什么样的效果,

css3转换中心点transform-origin设置


图中的正方形是旋转了180读,其实绿色的位置就是旋转以前的位置,我们发现这里的10px是以元素的坐标为准的,所以说如果我们享以元素的某个顶点进行旋转,我们直接找出他的坐标就可以了,比如左上角的坐标是(0,0),也可以是left ,top。右上角的是(100,0)或者righ,ttop以此类推。虾米那我们就以右下角为顶点旋转一下180读如图:

css3转换中心点transform-origin设置

当然,这是需要我们知道他的一个宽和高的。建议还是使用right,bottom。方位名次来表示。刚才已经说过了,总共有三种写法,可能有人都已经想到了,另一种写法就是百分比。我们默认的中心点也就是元素的中心点是center,center同样也是50%,50%。这个需奥大家注意,好了今天稻草日志的分享到此结束。希望大家能掌握transform-origin转换中心点的设置。

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。