转换(transform) 是可以实现元素的位移,旋转,缩放等效果
-
移动:
translate
-
旋转:
rotate
-
缩放:
scale
在CSS中的二维坐标系
1.1移动translate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位
-
定义2D转换中的移动,沿着X和Y轴移动元素
-
translate
最大的优点:不会影响到其他元素的位置 -
translate
中的百分比单位是相对于自身元素的 -
对行内标签没有效果
1.2旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
-
rotate
里面跟度数,单位是 deg 例如rotate(30deg)
-
角度为正时,顺时针,负时,为逆时针
-
默认旋转的中心点是元素的中心点
1.3旋转中心点transform-origin
2D转换中心点:可以设置元素转换的中心点
transform-origin
-
注意后面的参数x 和 y 用空格隔开
-
x y
默认转换的中心点是元素的中心点(50% 50%) -
可以给
x y
设置 像素或者方位名词(top bottom left right center)
2.缩放scale
========================================================================
缩放:
scale
,只要给元素添加上了这个属性就能控制它放大还是缩小
-
注意其中的
(x,y)
用逗号分割 -
transform:scale(1,1)
:宽和高都放大一倍,相当于没有放大 -
transform:scale(2,2)
:宽和高都放大了2倍 -
transform:scale(2)
:只写一个参数,第二个参数则和第一个参数一样,相当于scale(2,2)
-
transform:scale(0.5,0.5)
:缩小到原来的0.5倍 -
sacle
缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
3.2D转换综合写法
=========================================================================
-
同时使用多个转换,其格式为:
transform:translate() rotate() scale()
-
用文字表示,也就是 transform:移动 旋转 缩放
-
当我们同时有位移和其他属性时候,记得要将移动放到最前面