稻草日志分享 css3中transform属性2D转换的综合写法

王亚兵6个月前 (10-08)web前端基础125

在前面的分享中,我们对于transform中2d变换有了一定的了解, 并且掌握了如何进行元素移动,旋转和缩放。还可以通过ransform-origin改变transform的旋转中心。根据前面css中font,background的经验可能有人会问transform可不可以连写,也就是transform有没有综合写法,这个肯定是有的,下面就和大家分析一下transform综合写法如何写,需要注意那些东西。

在此之前我们照例先回忆一下我们之前的translate移动,scale缩放,和rotate旋转的用法以及注意事项,首先是translate,可以写两个值像素一般是px,中间是通过英文","隔开。除了数字之外当然也可以设置百分比,百分比是以元素的高和宽为基础,rotate旋转的话,括号中可以写一个值,而且需要deg单位。也可以是负号。如何是负号,就是逆时针的旋转。

还有我们昨天分享的scale缩放,他同样是可以写两个值,这两个值没有单位,指的是缩放的倍数。如果想缩小直接把倍数改成1以下的小数就可以了,当然也可以写一个值,也就是代表了x轴和y轴的倍数。同样他可以结合transform-origin改变我们的缩放中心。

为什么要先回忆前面的内容呢?因为我们要进行transform的综合写法,需要我们注意下顺序的问题。我们通过一个div和大家演示一下。同样的100px,同样的蓝色背景。我们想同时进行移动和旋转,比如想向右和向下移动100px。旋转45度。代码和效果如图:

css3中transform属性综合写法

果然和我们想想的一样,不仅移动了,而且也变成了一个菱形。那如果我们将translate和rotate调换一下位置,会有什么变化呢?我们看一下效果:

css3中transform属性综合写法

我们发现果然效果发生了变化,所以我们在实际的web前端开发过程中,如果有移动和其他的变换同时出现,一定要把translate放在前面。因为,旋转,和缩放会改变原来元素轴线位置,从而影响移动的轨迹。好了今天稻草日志的分享就到此为止,希望大家能掌握transform的综合写法

发表评论

访客

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