免费网站怎么建,网页游戏中心大全,免费logo设计自动生成器,什么是前端开发和后端开发2D转换transform 2D转换transform平移利用平移百分比优化盒子水平垂直居中 旋转指定2d变换的中心点 transform-origin 缩放2d转换简写 2D转换transform
所谓2D转换#xff0c;就是在二维坐标系内进行各种操作#xff0c;包括平移#xff0c;转动#xff0c;缩放等等… 2D转换transform 2D转换transform平移利用平移百分比优化盒子水平垂直居中 旋转指定2d变换的中心点 transform-origin 缩放2d转换简写 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旋转中心点 除了给定像素值还可以指定方位topbottomleftrightcenter
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); # 分别设置xy轴方向尺寸 transform: scale(a); # 统一设置设置xy轴方向尺寸为同一个值 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转换简写
先后顺序为位移 → 旋转 → 缩放
transform: translate() rotate() scale() 由于位移会影响坐标因此需将位移放在最前面。
