CSS3 2D转换
1、CSS3 转换
转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放……等。
2、工作原理
转换的效果是让某个元素改变形状、大小、位置……等，可以使用2D或3D转换来转换我们的元素。
3、2D 转换
2D转换是改变元素在二维平面上位置和形状的一种技术- 移动：
translate - 旋转：
rotate - 缩放：
scale - 倾斜：
skew
4、2D转换—移动(translate)
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
4.1 translate语法
- X就是在X轴上水平移动
- Y就是在Y轴上水平移动
transform:translate(x, y);
transform:translateX(n);
transform:translateY(n);
transform:translateX(n) translateY(n);
/*注意：如果translate(n)只有一个参数，则默认是对X轴进行平移*/
4.2 重点知识点
2D的移动主要是指水平、垂直方向上的移动translate最大的优点就是。不影响其他元素的位置translate中的100%单位，是相对于本身的宽度和高度来进行计算的- 平移单位为px
- 如果给的是一个负值，则是向X轴或Y轴负方向移动，也就是反方向
4.3 试一试
实现盒子水平垂直居中？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子水平垂直居中</title>
<style>
* {
padding: 0;
margin: 0;
}
header {
position: relative;
width: 800px;
height: 500px;
background-color: pink;
margin: 0 auto;
}
div {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: blue;
}
</style>
</head>
<body>
<header>
<div></div>
</header>
</body>
</html>
5、2D转换—旋转(rotate)
2D旋转指的是让元素在二维平面上顺时针旋转或者逆时针旋转。rotate()方法，在一个给定度数顺时针旋转元素。负数是允许的，这样就是元素逆时针旋转。
5.1 使用步骤
- 给元素添加转换属性
transform - 属性值为
rotate(角度deg)，如transform:rotate(45deg)顺时针方向旋转45度 - 单位：deg
div {
transform:roate(0deg);
}
5.2 设置元素旋转中心点
transform-origin基础语法
transform-origin: x y;
2. 重点知识点
- 注意后面的参数x和y用空格隔开
- x y 默认旋转的中心点是元素的中心(50% 50%)，等价于(
centercenter) - 还可以给x y 设置像素或者方位名词(
top、bottom、left、right、center)
5.3试一试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转</title>
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
margin: 100px auto;
overflow: hidden;
}
div::after {
display: block;
content: "传媒";
width: 100px;
height: 100px;
font-size: 30px;
text-align: center;
line-height: 100px;
background-color: skyblue;
transform: rotate(180deg);
/* 旋转中心为左下角 */
transform-origin: left bottom;
/* 开启过渡，所需时间为1s */
transition: transform 1s;
}
/* 鼠标悬停在父元素上，伪元素顺时针旋转回原来的位置，即原点 */
div:hover::after {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
6、2D转换—缩放(scale)
scale()方法，该元素增加或减小的大小，取决于宽度 (X轴) 和 高度 (Y轴)的参数。主要是用来控制元素的放大与缩小。
6.1 语法
transform:scale(x, y);
/*解释：转变宽度为原来的x倍，和其元素大小y倍的高度*/
6.2 知识要点
- 注意：x与y之间使用
,逗号进行分隔 transform:scale(1, 1);宽高都放大一倍，相当于没有放大transform:scale(2, 2);宽和高都放大了二倍transform:scale(2);如果只写一个参数，则宽高放大的倍数一致transform:scae(0.5,0.5);如果参数小于1则就是缩小scale最大的优势：可以设置中心点缩放，默认以中心点缩放，而且不影响其他盒子
6.3 试一试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缩放</title>
<style>
div {
width: 200px;
height: 300px;
margin: 100px auto;
border: 2px solid rgba(0, 0, 0, .2);
overflow: hidden;
}
img {
width: 100%;
height: 100%;
/* 设置过渡 */
transition: transform 0.1s;
}
div:hover img {
/* 宽高都放大1.03倍 */
transform: scale(1.03);
}
</style>
</head>
<body>
<div>
<img src="./images/260.png" alt="好想和你在一起" title="点击立即观看">
</div>
</body>
</html>
7、2D转换—倾斜(skew)
7.1 语法
transform:skew(x, y);
transform:skewX(x) skewY(y);
7.2 知识重点
skew包含两个参数，分别表示x轴和y轴倾斜的角度- 如果第二个参数为空，则默认为0
- 参数为负数表示向相反方向倾斜
skewX(x):表示只在X轴(水平方向)倾斜skewY(y):表示只在Y轴(垂直方向)倾斜- 单位也是deg
7.3 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倾斜(skew)</title>
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
margin: 100px auto;
/* 设置过渡 */
transition: all 1s;
}
/* 鼠标悬停后触发的事件 */
div:hover {
/* x轴倾斜20°,y轴倾斜20° */
transform: skew(20deg, 20deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
8、2D转换综合写法
8.1 知识点
-
同时使用多个转换，其格式为：
transform:translate() rotate() scale() -
顺序会影响到转换的效果(先旋转会改变坐标方向)
-
但我们同时有设置位置或者其他属性的时候，所有要将位移放到最前面
8.2案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D转换综合写法</title>
<style>
div {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: skyblue;
/* 过渡 */
transition: all 2s;
}
div:hover {
/* 先位移,再旋转,然后再倾斜,再缩放 */
transform: translate(100px, 100px) rotate(45deg) skew(20deg, 20deg) scale(2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
9、2D转换常用属性
| Property | 描述 | CSS |
|---|---|---|
| transform | 适用于2D或3D转换的元素 | 3 |
| transform-origin | 允许您更改转化元素位置 | 3 |
10、2D转换常用方法
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| 定义 2D 缩放转换，改变元素的宽度和高度。 | |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
扫一扫
1635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
