【CSS】2D转换

最新推荐文章于 2023-08-05 22:23:09 发布

Godac

最新推荐文章于 2023-08-05 22:23:09 发布

阅读量222

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_62827829/article/details/127284134

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

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);
}