2D 转换

1.转换 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。 转换(transform)可以简单理解为变形。 移动:translate 旋转:rotate 缩放:scale 1.1 二维坐标系 2D转换是改变在二维平面上的位置和形状的一种技术。 1.2 …

1.转换

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

转换(transform)可以简单理解为变形。

移动:translate

旋转:rotate

缩放:scale

1.1 二维坐标系

2D转换是改变在二维平面上的位置和形状的一种技术。

1.2 2D 转换之移动 translate

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

语法

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

transform: translateX(n);

transform: translateY(n);

重点

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

(2)translate最大的优点:不会影响到其他元素的位置。

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

(4)对行内标签没有效果。

1.3 2D转换之旋转 rotate

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

语法

transform: rotate(度数)

重点

(1)rotate里面跟度数,单位是deg

(2)角度为正时,顺时针,负时,为逆时针。

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

1.4 2D转换中心点 transform-origin

设置转换点为中心点。

语法

transform-origin: x y;

重点

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

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

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

1.5 2D转换之缩放scale

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

语法

transform: scale(x,y);

注意

(1)注意其中的x和y用逗号分隔。

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

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

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

(5)transform: scale(0.5,0.5):缩小。

(6)scale缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,则不影响其他盒子。

1.6 2D转换综合写法

注意:

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

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

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

                       

点击阅读全文

上一篇 2023年 5月 25日 pm12:02
下一篇 2023年 5月 26日 am12:53