【CSS】2D转换

2D转换

位移

2D：x,y轴，左上角为原点

语法

transform:translate(x,y);或者分开写
transform:translateX(n);
transform:translateY(n);

移动盒子的位置：定位、盒子的外边距、2D转换移动

重点

• 定义2D转换的移动，沿着x和y轴移动元素
• translate量大的优点：不会影响到其他元素的位置
• translate中百分比单位是相对于自身元素的translate(50%,50%);
• 对行内标签没有效果
• 保留原来位置

小技巧

盒子居中
div {
    position: absolute;
    width: 500px;
    height: 500px;
    background-color: pink;
}
p {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: skyblue;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

旋转

语法

transform:rotate(度数);

重点

• rotate里面跟度数，单位是deg，比如rotate(45deg)
• 角度为正时，顺时针，负时，逆时针
• 默认旋转的中心是元素的中心点

可以用来制作三角，旋转45度，保留上右边框

div {
    position: relative;
 	width: 249px;
 	height: 35px;
	border: 1px solid #000;
}
div::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 15px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: rotate(45deg);
    transition: all .3s;
}
div:hover::after {
    transform: rotate(225deg);
}

转换中心点

transform-origin可以设置元素转换的中心点

语法

transform-origin: x y;

重点

• 注意后面的参数用空格隔开
• x y 默认转换中心点是元素的中心点（50% 50%）
• 还可以给x y 设置像素或者方位名词（top bottom left right center）

缩放scale

语法

transform: scale(x,y);

重点

• 注意其中的x和y用逗号分隔
• transform:scale(1,1); :宽和高都放大一倍，相对于没有放大
• transform:scale(2,2);:宽和高都放大了2倍
• transform:scale(2);:只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
• transform:scale(0.5,0.5):缩小
• sacle缩放最大的优势∶可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
• width,height 以左右下放大，会影响后面的盒子；scale(x,y)以中心放大，不会影响后面的盒子

2D转换综合写法

注意

1. 同时使用多个转换，其格式为：transform:translate() rotate() scale()...等
2. 其顺序会影响转换的效果。（先旋转会改变坐标轴方向）
3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前

2D转换总结

• 转换transform我们简单理解就是变形有2D和3D之分
• 我们暂且学了三个分别是位移旋转和缩放
• 2D移动translate(x, y)最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
• 可以分开写比如translateX(xi)和translatL (y)
• 2D旋转rotate(度数)可以实现旋转元素度数的单位是deg
• 2D缩放sacle(x y)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子
• 设置转换中心点transform-origin : xy;参数可以百分比、像素或者是方位名词
• 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前