前端入门——快速理解H5+css中的旋转
说到旋转，那么必然要确定两个条件，旋转原点 和 旋转方向。
旋转原点： 顾名思义，即旋转是绕着哪个点来进行旋转的
旋转方向： 即绕着哪个方向进行旋转的
实现效果前，先介绍一下几个css属性：
变形原点：
transform-orgin: x , y ; (2d用法)
transform-origin: x , y , z ; （3d用法）
x 可能的值为： top、 center、 bottom； （原点的垂直方向位置）
y可能的值为： left、 center、 right； （原点的水平方向位置）
z可能的值为： … 、-1、 0、1、2、 …
旋转：
2d旋转
transform: rotate( 旋转的角度 );
绕原点进行旋转，括号内填角度值，默认为顺时针旋转（角度值为负，则为逆时针旋转）
3d旋转
transform: rotate3d( 是否绕x轴旋转，是否绕x轴旋转，是否绕x轴旋转，旋转的角度);
前三个值 填 1 表示 是， 填 0 表示 否
最后一个值 填 旋转的角度
旋转的方向都默认为顺时针
注意：需从轴线箭头方向向着（0，0，0）坐标方向看
3d转换
transform-style : preserve-3d;
浏览器默认的所有标签为2d，想要实现3d的效果，就必须将需要实现3d效果的标签的父级设置该属性, 即： 将父级设置成一个3d空间，
让子级在3d空间中进行3d操作
2d的旋转
简单演示：
<!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>
/*清除浏览器的默认边距*/
*{
margin: 0;
padding: 0;
}
/*这是一个父级盒子，里面有两个小盒子*/
div{
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100px auto; /*将盒子放在浏览器中间*/
}
/*第一个小盒子*/
p{
width: 50px;
height: 50px;
background-color: pink;
/*不设置原点则默认为盒子中心*/
/*绕盒子中心点顺时针旋转60度*/
transform: rotate(60deg);
}
/*第二个小盒子*/
h2{
width: 50px;
height: 50px;
background-color: skyblue;
/*设置原点*/
transform-origin: left top;
/*绕左上角顺时针旋转30度*/
transform: rotate(30deg);
}
</style>
</head>
<body>
<div>
<p>1</p>
<h2>2</h2>
</div>
</body>
</html>
3d的旋转
简单演示：
<!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>
/*清除浏览器的默认边距*/
*{
margin: 0;
padding: 0;
}
/*这是一个父级盒子，里面有一个小盒子*/
div{
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100px auto; /*将盒子放在浏览器中间*/
/*形成3d空间*/
transform-style: preserve-3d;
}
/*一个小盒子*/
p{
width: 50px;
height: 50px;
background-color: pink;
/*不设置原点则默认为盒子中心*/
/*盒子绕着x轴转60du，再绕着y轴转60度*/
transform: rotate3d( 1,1,0,60deg);
}
</style>
</head>
<body>
<div>
<p>1</p>
</div>
</body>
</html>
当然了，这只是最基本的对2d和3d的介绍，还有更多的用法和属性值，可以在W3C文档中查看。
最后，祝大家早日成为一个优秀的程序员。
