2D转换transform
所谓2D转换,就是在二维坐标系内进行各种操作,包括平移,转动,缩放等等;
平移
语法:
transform:translate(x, y);
transform:translateX(x);
transform:translateY(y);
x和y都是相对于屏幕左上角而言,左上为负值,右下为正值;与传统数学坐标系注意区分
要实现盒子的平移,目前有多种方式
- margin
- 定位
- translate
- 父盒子的 padding
注意点:
- translate不影响其他元素位置,和相对定位类似,不脱离文档流。
- translate 使用百分比时,是相对自身宽高而言,而不是相对父盒子的宽高
- 位移只针对行内块和块级元素有效;行内元素不适用。
-
位移覆盖显示优先级:
- 有位移的覆盖无位移的
- 都有位移时,后面定义的元素覆盖前面的元素
利用平移百分比优化盒子水平垂直居中
之前是定位之后,往回平移盒子的尺寸的一半,实现;如下
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
background-color: #ee20ee;
margin-left: -50px;
margin-top: -50px;
如果盒子尺寸一旦变化,margin的值也要跟着改动,如果使用平移 50% 实现,就无需改动。
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
background-color: #ee20ee;
transform: translate(-50%, -50%);
旋转
绕着哪个轴旋转
语法:
transform:rotate(45deg); // 默认相当于 rotateZ
transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
transform:rotate3d(x, y, z, 180deg); // 从3维原点到指定3维坐标点(x,y,z)连接的线旋转 180度。
旋转几度,默认旋转点为盒子中心点
transform:rotate(45deg);
同样,旋转也只对块级元素和行内块有效
指定2d变换的中心点 transform-origin
旋转点坐标 中间是空格不是逗号
包括 缩放和旋转的中心点都可以通过这个属性设置
语法:
transform-origin: x y; // 指定Z轴旋转(2d旋转)中心点
除了给定像素值,还可以指定方位:top,bottom,left,right,center
transform-origin: 10px 10px;
示例
.c1 {
background-color: #e6393c;
transition: all 0.5s;
transform-origin: left bottom;
}
.c1:hover {
transform: rotate(45deg);
}
缩放
设置盒子的尺寸在指定方向上缩放指定倍数(整数小数均可)
语法:
transform:scale(x, y); # 分别设置x,y轴方向尺寸
transform: scale(a); # 统一设置设置x,y轴方向尺寸为同一个值
transform:scaleX(x); # 设置x轴方向尺寸
transform:scaleY(y); # 设置y轴方向尺寸
transform:scaleZ(z); # 设置z轴方向尺寸
transform: scale3d(2, 2, 2); 分别设置 xyz 三个方向的上的扩缩比
# 以下三者等价
transform: scale(2);
transform: scaleX(2) scaleY(2);
transform: scale(2, 2);
2d转换简写
先后顺序为:位移 → 旋转 → 缩放文章来源:https://www.toymoban.com/news/detail-678055.html
transform: translate() rotate() scale()
由于位移会影响坐标,因此需将位移放在最前面。文章来源地址https://www.toymoban.com/news/detail-678055.html
到了这里,关于H5 + C3基础(六)(2D转换transform 位移 & 旋转 & 缩放)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!