CSS3 2D转换之移动
CSS3 2D转换
-
转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
-
转换(transform)可以简单的理解为变形
- 移动:translate
- 旋转:rotate
- 缩放:scale
-
二维坐标系
- 2D转换时改变标签在二维平面上的位置和形状的一种技术，先来学习下二维坐标系
2D转换之移动
-
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
-
移动盒子的位置方法
- 定位
- 盒子的外边距
- 2D转换移动
-
语法
transform: translate(x, y);- 或者分开写
- x代表x轴上的移动位置
- y代表y轴上的移动位置
- 中间用逗号分隔
- 不移动可以写0，但是不能省略
transform: translateX(n);transform: translateY(n);
div {
width: 100px;
height: 100px;
background-color: #008484;
transform: translate(100px, 100px);
}
-
如果我们只移动x坐标
transform: translate(100px,0);
等同于
transform: translateX(100px); -
如果我们只移动y坐标
transform: translate(0,100px);
等同于
transform: translateY(100px); -
重点
- 定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点是不会影响到其它元素的位置translate中的百分比单位是相对于自身元素的translate:(50%, 50%)- 对行内元素没有效果
-
演示一下
translate的最大的优点
<style>
div:first-child {
width: 100px;
height: 100px;
background-color: #008484;
transform: translate(50px,50px);
}
div:nth-child(2) {
width: 100px;
height: 100px;
background-color: red;
}
</style>
- 下面我们来做一个盒子的水平垂直居中
div {
width: 300px;
height: 300px;
background-color: #008484;
position: relative;
}
p {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
/* margin-top: -50px;
margin-left: -50px; */
/* transform: translate(-50%, -50%); */
}
</style>
<body>
<div>
<p></p>
</div>
</body>
- 这里图中的红色盒子并没有水平垂直居中
- 以前我们都是用改变盒子的margin来实现的
- 现在我们也可以使用transform来实现
- 下面来看看对行内元素的效果
span {
transform: translate(100px, 100px);
}
本文来自博客园，作者：懒惰ing，转载请注明原文链接：https://www.cnblogs.com/landuo629/p/12445387.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？