transform 是元素转换属性，其属性值为转换函数，使用该属性可以让元素向指定方向移动、缩放大小、旋转等变化。
有以下三种转换函数：
- 旋转函数（rotate）
- 移动函数（translate）
- 缩放函数（scale）
translate
CSS中的二维坐标系如下（注意y轴正方向与数学中常见的二维坐标系中的y轴正向不一样）
- 语法
transform: translate(x,y); // 或者分开写
transform: translateX(n); // 沿x轴方向，参数为正沿x轴正向，为负沿x轴负向
transform: translateY(n); // 沿y轴方向，参数为正沿y轴正向，为负沿y轴负向
- 特点
- translate最大的优点：不会影响到其他元素的位置
- 参数可以是带单位的数值或百分比，百分比是相对于自身元素的尺寸而言的
- 对行内标签不起效果
<head>
<style>
/* 移动盒子的位置： 定位 盒子的外边距 2d转换移动 */
div {
width: 200px;
height: 200px;
background-color: pink;
/* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
/* transform: translate(x, y); */
/* transform: translate(100px, 100px); */
/* 1. 我们如果只移动x坐标 */
/* transform: translate(100px, 0); */
/* transform: translateX(100px); */
/* 2. 我们如果只移动y坐标 */
/* transform: translate(0, 100px); */
/* transform: translateY(100px); */
}
.div1 {
transform: translate(30px, 30px);
}
.div2 {
background-color: purple;
}
span{
// translate对行内标签不起效果
transform: translate(30px, 30px);
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<span>123</span>
</body>
技巧：可以利用translate实现子盒子相对父盒子居中
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
position: relative;
width: 500px;
height: 500px;
background-color: pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: purple;
// 老方法：通过margin让盒子往左上走自己该方向长度的一半
/* margin-top: -100px;
margin-left: -100px; */
/* 盒子往左上走自己该方向长度的一半 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
rotate
在 CSS3 中，使用 rotate 函数能够让指定的元素对象绕一点旋转，主要在二维空间内进行操作。
- 语法
transform:rotate(度数) // 单位是deg（度） - 重点
- rotate里面跟度数， 单位是 deg 比如 rotate(45deg)
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点
transform-origin可以指定旋转点
- 语法
transform-origin: x y;// x, y是相对于元素左上角而言的
- 重点
- 参数可以是带单位的数值，百分比，关键字（left|right|bottom|top|center）
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认转换的中心点是元素的中心点 (50% 50%)
练习1：利用旋转制作下拉三角
以前做法：使用下三角形状的字体图标
现在可以通过rotate实现下拉三角效果
参考代码
- 这个是教程思路：我感觉这个更美观灵活些
<!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{
position: relative;
width: 230px;
height: 30px;
border: 1px solid #000;
}
div::after{
content: "";/* 必须要有设置内容这一属性，否则这个伪元素盒子显示不出来 */
position: absolute;
top: 6px;
right: 10px;
width: 10px;
height: 10px;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
transform: rotate(45deg);
transition: all .3s;
}
div:hover::after{
/* 注意角度是相对于元素初始的状态，就是没有做任何旋转的状态 */
transform: rotate(-135deg);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
- 这个是我刚开始的思路，感觉这个虽然代码量少些，但是不够灵活，不太好看（尖角的角度比较小）
<!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: 230px;
height: 30px;
border: 1px solid #000;
}
div>span{
float: right;
margin-top: 5px;
margin-right: 5px;
transform: rotate(90deg);
transition: all .3s;
}
div:hover>span{
/* 注意角度是相对于元素初始的状态，就是没有做任何旋转的状态 */
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div id="box">
<span>></span>
</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:100px auto;
border: 2px solid green;
/* 隐藏溢出部分 */
overflow: hidden;
}
div::before{
/* 伪元素默认是行内元素，需转换成行内块或块级元素才可以指定宽高 */
display: block;
content: "hello!";/* 必须要有设置内容这一属性，否则这个伪元素盒子显示不出来 */
width: 100%;
height: 100%;
background-color: green;
transform-origin: left bottom;
transform: rotate(90deg);
transition: all .3s;
}
div:hover::before{
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>