目录
- 1、转换
- 2、二维坐标系
- 2.1 2D转换之移动translate
- 2.2 2D旋转之rotate
- 练习1
- 练习2
- 练习3
- 2.3 2D转换之缩放scale
- 练习1
- 练习2
- 2D转换综合写法
- 转换综合练习
1、转换
转换transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
2、二维坐标系
2.1 2D转换之移动translate
作用：改变元素在页面中的位置，与定位类似
单位是px,也可以直接写百分比
transform:translate(x,y);
或者
transform:translateX(n);
transform:translateY(n);
特点:
- 移动不会影响其他盒子的位置，自身不脱标
- translate中的百分比单位是相对于自身元素的translate:(50%,50%)，比如当前盒子width=100px,就移动50px
- 对行内标签无效
<!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>Document</title>
<!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>Document</title>
</head>
<body>
<style>
div:first-child{
width: 100px;
height: 100px;
background-color: aquamarine;
transform: translate(50%,50px);
}
div:last-child{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</body>
</html>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
</section>
<!-- <div>2</div> -->
</body>
</html>
应用：将盒子居中，与position搭配使用
<!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>Document</title>
<style>
.father{
position: relative;
width: 250px;
height: 250px;
background-color: greenyellow;
}
.son{
position: absolute;
top:50%;
left: 50%;
width: 100px;
height: 100px;
background-color: orange;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
2.2 2D旋转之rotate
transfrom:rotate(度数)
说明：
- 度数单位是deg
- 角度为正数，顺时针。负数，逆时针
- 默认旋转的中心点是元素的中心点
使用transform-origin:x y;指定转换中心点
注意：
（1）x和y中间用空格分开
（2）x y默认转换的中心点是元素的中心点:transform-orgin:50% 50%
（3）还可以给x y设置像素px或方位名词top bottom left right center
练习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>Document</title>
<style>
img{
width: 100px;
border-radius: 50px;
transition: all 0.2s;
}
div{
width: 100px;
height: 100px;
border-radius: 50px;
border: 2px orange solid;
}
img:hover{
transform: rotate(45deg);
}
</style>
</head>
<body>
<div>
<img src="../images/猛男.jpg" alt="">
</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>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin: 0 auto;
background-color: orange;
/* 可以跟方位名词 */
transform-origin: left bottom;
}
div:hover{
transform: rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
旋转2
练习3
旋转：鼠标经过盒子时，其他盒子旋转进来
<!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>Document</title>
<style>
div{
width: 100px;
height: 100px;
margin: 0 auto;
border: 1px orange solid;
overflow: hidden;
}
div::after{
content: '';
display: block;
width: 100%;
height: 100%;
background-color: chartreuse;
/* 可以跟方位名词 */
transform-origin: left bottom;
transform: rotate(90deg);
border-radius: 50%;
transition: all 0.5s;
}
div:hover::after{
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
旋转案例3
2.3 2D转换之缩放scale
放大和缩小元素
transform:scale(x,y);
说明：
1、x和y没有单位，是倍数的意思。1就是1倍不变，2就是2倍
2、只写一个参数，就代表等比缩放
3、参数值小于1就是缩小
4、scale优势：
不影响其他盒子，可以设置缩放中心点transfor-origin
练习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>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 0 auto;
}
div:hover{
transform: scale(2,2);
}
</style>
</head>
<body>
<div></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>Document</title>
<style>
div{
float: left;
margin: 10px;
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 50%;
}
div img{
width: 100px;
transition: all 3;
border-radius: 50%;
}
div img:hover{
transform: scale(1.5);
}
</style>
</head>
<body>
<div><a href=""><img src="../images/猛男.jpg" alt=""></a></div>
<div><a href=""><img src="../images/猛男.jpg"></a></div>
<div><a href=""><img src="../images/猛男.jpg"></a></div>
</body>
</html>
2D转换综合写法
- 同时使用多个转换，其格式为:
transform:translate() rotate() scale()
- 书写顺序会影响转换效果，先旋转会改变坐标轴方向
- 当同时有位移和其他属性时，要将位移放到最前面
转换综合练习
鼠标经过小狗时，边移动边放大
<!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>Document</title>
<style>
div{
float: left;
margin: 10px;
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 50%;
/* transform-origin: (left bottom); */
}
div img{
/* transform-origin: (left bottom); */
width: 100px;
transition: all 3;
border-radius: 50%;
}
div img:hover{
transform: translate(50px) scale(1.5);
}
</style>
</head>
<body>
<div><a href=""><img src="../images/猛男.jpg" alt=""></a></div>
<div><a href=""><img src="../images/猛男.jpg"></a></div>
<div><a href=""><img src="../images/猛男.jpg"></a></div>
</body>
</html>
