文章目录
- 一、CSS3 2D 转换 - 平移 / 旋转 / 缩放
- 二、CSS 2D 转换 - Translate 移动
- 三、Translate 移动代码示例
- 1、基本示例
- 2、脱标测试 ( 百分比平移 )
- 四、Translate 百分比移动实现绝对定位的居中效果
- 1、传统实现方式代码示例
- 2、百分比移动实现绝对定位的居中效果代码示例
一、CSS3 2D 转换 - 平移 / 旋转 / 缩放
CSS3 中的 Transform 转换 , 可以实现 标签元素 的 位移 / 旋转 / 缩放 ;
CSS3 转换的 二维坐标系如下 : 该坐标系是 界面开发的 常用坐标系样式 ;
二、CSS 2D 转换 - Translate 移动
在网页中将 标签元素 沿着 x 轴 和 y 轴 各自移动指定的长度 , 就是 2D 转换中的移动操作 ;
CSS 2D 转换 - Translate 移动 语法如下 : 为 标签元素 设置如下属性值 , 即可实现移动 ;
- x 轴移动语法 :
transform: translateX(x); - y 轴移动语法 :
transform: translateY(y); - x / y 轴移动语法 :
transform: translate(x, y);
Translate 移动 语法 : 上述 transform: translate 中可以传入百分比值 , 百分比是相对于元素自身尺寸来说的 ;
/* 水平方向 向右移动 元素自身宽度的 50% 距离
垂直方向 向下移动 元素自身高度的 50% 距离 */
transform: translate(50%, 50%);
移动盒子模型位置的方法 :
- 通过定位样式移动盒子 : 相对定位 relative 样式 , 绝对定位 absolute 样式 ;
- 通过设置盒子外边距 : 外边距 margine 样式 ;
- 2D 转换中的 Translate 移动 ; transform: translate() 样式 ;
Translate 移动 相对于其它方式 移动盒子模型 的优点 : 使用 Translate 移动标签元素 , 不会影响其它元素的位置 , 不会脱标 ;
Translate 只能移动块级元素 , 对于 行内元素 / 行内块元素 是无效的 ;
三、Translate 移动代码示例
1、基本示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 2D转换-Translate 移动</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
background-color: pink;
/* 水平方向向右移动 100 像素 */
/* transform: translateX(100px); */
/* 垂直方向向下移动 100 像素 */
/* transform: translateY(100px); */
/* 水平方向和垂直方向都移动 100 像素 */
transform: translate(100px, 100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
执行结果 :
2、脱标测试 ( 百分比平移 )
两个标准流盒子放在一起 , 如果为前一个盒子设置 translate 移动 , 该盒子并不会脱标 , 而是继续占有现有位置 ;
后面的标准流盒子的位置并不会发生改变 ;
下面的 translate 中使用了百分比单位 , 该百分比是相对于标签元素自身的尺寸来说的 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 2D转换-Translate 移动</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
div:first-child {
/* 结构伪类选择器 选择 父容器中 第一个 div 标签 */
transform: translate(50%, 50%);
}
div:last-child {
/* 结构伪类选择器 选择 父容器中 最后一个 div 标签 */
background-color: aquamarine;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
执行结果 :
四、Translate 百分比移动实现绝对定位的居中效果
在之前使用 绝对定位 进行居中设置时 ,
- 首先 , 走到父容器的一半位置 ;
- 然后 , 再往回走子元素的一半距离 ;
此时就可以实现元素居中设置 ;
在设置 第二步 的时候 , 子元素需要往回走一半距离 , 可以使用 Translate 移动 50% 距离实现 ;
1、传统实现方式代码示例
传统实现方式代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Translate 百分比移动实现绝对定位的居中效果</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
/* 子绝父相 子元素绝对定位 本父容器设置相对定位 */
position: relative;
width: 200px;
height: 200px;
background-color: pink;
}
p {
/* 子绝父相 子元素设置绝对定位 */
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
background-color: red;
/* 往回走子元素一半尺寸 */
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
显示效果 :
2、百分比移动实现绝对定位的居中效果代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Translate 百分比移动实现绝对定位的居中效果</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
/* 子绝父相 子元素绝对定位 本父容器设置相对定位 */
position: relative;
width: 200px;
height: 200px;
background-color: pink;
}
p {
/* 子绝父相 子元素设置绝对定位 */
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
background-color: red;
/* 往回走子元素一半尺寸 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
显示效果 :
