• 周五. 9月 30th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

css3中的2D转换

admin

11月 28, 2021

css3
2D转换
transform是css3中具有颠覆性的特征之一,可以实现元素的位移 旋转 缩放
移动 translate
旋转 rotate
缩放 scale

移动 translate
语法:transform:translate(x,y)
或者:transform:translateX(n);
transform:translateY(n);

translate最大的优点 不会影响其他盒子
translate 中的百分比单位是相对于自身元素translate(50%,50%)
对行内标签没有效果

旋转 rotate
语法:transfomr:ratate(度数)
rotate里面跟度数。单位是deg,比如 rotate(45deg)
角度是正时,顺时针;负时,逆时针
默认旋转的中心点时元素的中心点
旋转中心点 transform-origin:x y
注意后面的参数用空格隔开 xy默认的旋转中心点时元素的中心点50% 50%
还可以给xy设置像素或者方位名词

缩放 scale
语法 transform:scale(x,y);

/* 1.里面写的数字不跟单位 就是倍数的意思 */
/* transform: scale(2, 2); */
/* 2.宽度原来的2呗 高度不变 */
/* transform: scale(2, 1); */
/* 3.等比例缩放 同时修改了宽度和高度, 以下是宽度修改了2倍 高度默认和第一个参数一样 */
/* transform: scale(2); */
/* 4.可以进行缩小 小于1 就是缩放 */
/* transform: scale(0.5, .5) */
/* 5.scale的优点 :不会影响其他盒子 可以设置缩放的中心点*/

2d转换的综合写法
1.同时使用多个旋转 其格式为:transform:translate() rotate() scale();
2.其顺序会影响旋转的效果,先旋转会改变坐标轴的方向
3.当我们同时有位移和其他属性的时候,记得要将位移放在最前面

发表回复

您的电子邮箱地址不会被公开。