-
2D转换是改变标签在二维平面上的位置和形状 -
移动：
translate -
旋转：
rotate -
缩放：
scale
语法如下：
transform: translate(x, y) transform: translateX(n) transfrom: translateY(n)
2D移动主要是指水平、垂直方向上的移动，translate方法最大优点是不影响其他元素的位置。
例如：/* 水平垂直移动 100px */ /* transform: translate(100px, 100px); */
2.让一个盒子水平垂直居中1）子绝父相（子元素用绝对定位，父元素用相对定位）
父元素设置为相对定位，子元素设置为绝对定位，子元素设置距左上为50%，并设置距左上边距为-元素自身长度一半：
.parent{
width: 500px;
height: 300px;
margin: 10px auto;
border: 1px solid #ccc;
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
实现效果：
2）使用transform: translate(-50%, -50%)方式实现
.parent1{
width: 500px;
height: 300px;
margin: 10px auto;
border: 1px solid #ccc;
position: relative;
}
.child1{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
background-color: orange;
transform: translate(-50%, -50%);
}
效果如下：
3.计算属性法calc（）
.parent2{
width: 500px;
height: 300px;
margin: 10px auto;
border: 1px solid #ccc;
position: relative;
}
.child2{
width: 100px;
height: 100px;
position: absolute;
background-color: orange;
/* 计算属性 */
left: calc(50% - 50px);
top: calc(50% - 50px);
}
实现效果如下：
rotate
基本语法如下：
/* 单位是：deg */ transform: rotate(度数)
旋转为正值时顺时针方向，负值时为逆时针方向；
默认中心点是旋转中心点；
旋转的度数单位为deg；
例如：
.box{
width: 200px;
height: 50px;
background-color: chartreuse;
margin: 20px auto;
transform: rotate(44deg);
}
实现效果如下：
设置旋转原点：transform: rotate(deg);
例如：
.parent{
width: 200px;
height: 50px;
background-color: lightgray;
margin: 20px auto;
}
.child{
width: 200px;
height: 50px;
background-color: chartreuse;
margin: 20px auto;
transform: rotate(44deg);
/* 设置旋转的原点 px % center left top bottom right */
/* transform-origin: 0 0; */
/* transform-origin: left top; */
transform-origin: 0% 0%;
}
scale用于控制元素的放大与缩小。
语法如下：transform: scale(x, y)
-
注意，x 与 y 之间使用逗号进行分隔
-
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大 -
transform: scale(2, 2): 宽和高都放大了二倍 -
transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致 -
transform:scale(0.5, 0.5): 缩小 -
scale最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
-
同时使用多个转换，其格式为
transform: translate() rotate() scale() -
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
-
但我们同时有位置或者其他属性的时候，要将位移放到最前面
