★文章内容学习来源：拉勾教育大前端就业集训营
2D 转换
一、介绍
- 属性名 ：
transform - 作用：对元素进行移动、缩放、旋转、拉长或拉伸。
配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。 - 属性值 ：多种转换方法的属性值，可以实现不同的转换效果。详细见以下。 |
二、属性值及举例
1.位移 translate()
- transform 的属性值为
translate()时，可以实现位移效果。 - 书写语法：
| 值 | 说明 |
|---|---|
translate(x,y) |
x,y分别为水平和垂直方向位移的距离，可以为px值或百分比， 区分正负 |
translate(x) |
只有一个数值，表示水平方向的位移 |
- 百分比指的是元素自身的百分比（border及以内，不包括margin）
1.1举例 translate(x) （只有一个数值，表示水平方向的位移）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D 转换-位移(x)</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
/*定义一个box表示原img所在的位置*/
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 100px 200px;
}
.box img {
height: 340px;
transform: translate(100px);/*向右移动100px*/
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
1.2举例 translate(x,y) （x,y分别为水平和垂直方向位移的距离）
.box img {
height: 340px;
transform: translate(-100px,-50px); /*左移100px，上移50px*/
}
2. 缩放scale()
- transform 的属性值为
scale()时，可以实现元素缩放效果。 - 书写语法：
| 值 | 说明 |
|---|---|
scale(x, y) |
x,y分别为改变元素的宽度和高度的倍数 |
scale(n) |
只有一个值，表示宽度和高度同时缩放n倍 |
scaleX(n) |
改变元素的宽度倍数 |
scaleY(n) |
改变元素的高度倍数 |
2.1举例scale(x, y)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换-缩放(x, y)</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
/*外面的box代表img原来的大小*/
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 100px 100px;
}
.box img {
height: 340px;
transform: scale(0.5,0.7); /*水平方向缩放0.5倍，垂直方向缩放0.7倍*/
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
2.2举例scale(n)
.box img {
height: 340px;
transform: scale(0.5); /*宽度高度同时缩放0.5倍*/
}
2.3举例scaleX(n)
.box img {
height: 340px;
transform: scaleX(0.5); /*宽度缩放0.5倍*/
}
2.4举例scaleY(n)
.box img {
height: 340px;
transform: scaleY(0.5); /*高度缩放0.5倍*/
}
3.旋转 rotate()
- transform 属性值设置为
rotate()时，实现元素的旋转。 - 书写语法：
rotate(数字deg); - 其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。
- 2D的旋转只有一个属性值。
- 注意：元素旋转后，坐标轴也跟着发生转变。
因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。（具体参见3.3和3.4举例）
3.1举例：旋转（正数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换-旋转rotate(正数)</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
/*外面的box代表img原来的位置*/
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 100px 100px;
}
.box img {
height: 340px;
transform: rotate(30deg); /*顺时针*/
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
3.2举例：旋转（负数）
.box img {
height: 340px;
transform: rotate(-30deg); /*逆时针*/
}
因为元素旋转后，坐标轴也跟着发生转变。
因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异，为了更好地感受差异，借用:hover伪类和transition过渡属性，动态理解，如下两个例子。
3.3举例：先旋转后位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换-旋转（先旋转后位移）</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
/*外面的box代表img原来的位置*/
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 50px;
}
.box img {
height: 340px;
}
.box img:hover {
/*鼠标一悬停，进行*/
transform: rotate(30deg) translate(300px); /* 先旋转后位移 */
transition: img 5s linear 0 ; /*过渡属性设置，上篇有介绍*/
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
3.4举例：先位移后旋转
.box img:hover {
transform: translate(300px) rotate(30deg) ; /* 先位移后旋转 */
transition: img 5s linear 0 ;
}
4.倾斜 skew()
- transform 属性值设置为
skew()时，实现元素的倾斜。 - 书写语法：
transform: skew(数字deg,数字deg); - 两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0。
- 水平方向，底边变化，正数向右；
- 垂直方向，右边变化，正数向下；
*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换-倾斜 skew() </title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
/*外面的box代表img原来的位置*/
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 100px;
}
.box img {
height: 340px;
transform: skew(30deg,); /*水平方向，正数*/
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
4.2举例：水平方向负数
.box img {
height: 340px;
transform: skew(-30deg);/*水平方向，负数*/
}
4.3举例：垂直方向正数
.box img {
height: 340px;
transform: skew(0,30deg); /*垂直方向，正数*/
}
4.4举例：垂直方向负数
.box img {
height: 340px;
transform: skew(0,-30deg); /*垂直方向，正数*/
}
三、 transform-origin 属性
1.介绍
- 作用：设置调整元素的水平和垂直方向原点的位置， 调整元素的基准点。
- 属性值：包含两个，中间使用空格分隔。
- 语法：
transform-origin：x y ;
| 属性值 | 说明 |
|---|---|
| x | 定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比 |
| y | 定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比 |
2.举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform-origin属性 </title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
/*外面的box代表img原来的位置*/
width: 361.7px;
height: 340px;
border: 1px solid red;
margin: 200px;
}
.box img {
height: 340px;
transform-origin: left top; /*定义基准点*/
}
.box img:hover {
transform: rotate(-30deg); /*逆时针旋转30deg*/
}
</style>
</head>
<body>
<div class="box">
<img src="samoye.jpg" alt="">
</div>
</body>
</html>
四、综合应用——卡包特效案例
<html>
<head>
<title>卡包特效</title>
<style>
.box {
position : relative;
width: 300px;
height: 170px;
border: 1px solid black;
margin: 400px 50px;
}
.box img {
position :absolute;
left: 0;
top: 0;/*所有的卡片初始都在这个位置，所以要设置定位，子绝父相*/
width: 300px;
height: 170px;
transform-origin: right top;
transition: all 1s linear 0s;
}
.box:hover img:nth-child(1) {
transform: rotate(60deg);
}
.box:hover img:nth-child(2) {
transform: rotate(120deg);
}
.box:hover img:nth-child(3) {
transform: rotate(180deg);
}
.box:hover img:nth-child(4) {
transform: rotate(240deg);
}
.box:hover img:nth-child(5) {
transform: rotate(300deg);
}
.box:hover img:nth-child(6) {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="img/1.jpg"></img>
<img src="img/2.jpg"></img>
<img src="img/3.jpg"></img>
<img src="img/4.jpg"></img>
<img src="img/5.jpg"></img>
<img src="img/6.jpg"></img>
</div>
</body>
</html>
下篇继续：
【45】CSS3 （4）——新增属性③3D 转换
转载：https://blog.csdn.net/weixin_47640160/article/details/115495544
查看评论