其他分享
首页 > 其他分享> > 二十七、2D转换

二十七、2D转换

作者:互联网

2D转换

转换(transform)时css3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。

移动:translate

旋转:rotate

缩放:scale

1.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系

1.2 2D转换之translate

2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。

语法:

transform:translate(x,y)或分开写

transform:translateX(n)

transform:translateY(n)

重点:

定义2D转换中的移动,沿着X和Y轴移动元素。

translate最大的优点:不会影响到其它元素的位置。

translate中百分比单位是相对于自身元素的translate(50%,50%)

对行内标签没有效果。

1.3 2D转换之旋转rotate

2D旋转指的是让元素在二维平面内顺时针旋转或逆时针旋转。

语法:transform:rotate(度数)

重点:

rotate里面跟度数,单位是deg比如rotate(45deg)

角度为正时,顺时针,负时,为逆时针。

默认旋转的中心点是元素的中心点。

1.4 2D转换中心点transform-origin

语法:transform-origin:x,y

重点:

注意后面的参数x和y用空格隔开。

x y 默认转换的中心点是元素的中心点(50%,50%)

还可以给x y设置像素或者方位名词(top bottom left right center)

1.5 2D转换之缩放

缩放,顾名思义,可以放大和缩小。,只要给元素添加上了这个属性就能控制它放大还是缩小。

语法:

transform:scale(x,y)

注意:

注意其中的x和y用逗号分割。

transform:scale(1,1)  宽和高都放大一倍,相当于没有放大。

transform:scale(2,2)  宽和高都放大2倍

transform:scale(2)只写一个参数,第二个参数则与第一个参数一样,相当于scale(2,2)

transform:scale(0.5,0.5)缩小

scale缩放最大的优势:可以设置转换中心缩放,默认以中心点缩放的,而且不影响其它盒子。

1.6 2D转换综合写法

注意:

1、同时使用多个转换,其格式为:transform:translate() rotate() scale() ……等

2、其顺序会影响转换的效果。(先旋转会改变坐标轴方向)

3、当我们同时有位移和其它属性的时候,记得将位移放到最前。

标签:scale,转换,缩放,transform,二十七,2D,translate
来源: https://blog.csdn.net/chunxiaqiudong5/article/details/122222533