标签：CSS3 angle 定义 2D 转换 border 3D
文章目录
2D转换
在网页制作的过程中，我们有时会需要改变原有图形的尺寸，位置，方向等，虽然说通过改变宽和高也能实现，但是在位置与方向上的修改就显得没有那么灵活。
所以，引入了一个属性——transform来实现2D转换
1.translate()方法
translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。
2.rotate（）方法
rotate值（30deg）元素顺时针旋转30度。
正值为顺时针旋转，负值为逆时针旋转
3.scale（）
scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
先宽后高
4.skew()
skew(30deg,20deg) 元素在X轴和Y轴上倾斜30度20度。
参数为负表示向相反方向倾斜
5.matrix（）
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
总结
以上写法均为简写，以下为每一种取值
- 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 轴。
- skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
应用举例：
在网页中经常会看到一个三角形小图标，鼠标放上去之后小三角形逆置180°并且弹出二级菜单，今天，我们就利用2D转换和盒模型的简单知识来简单制作一个这样的图标。
div{
border-left-color: transparent;
border-bottom-color:transparent;
border-top-color:yellowgreen;
border-right-color:transparent;
width: 0px;
height: 0px;
border-width:100px;
border-style: solid;
}
div:hover{
transform:rotate(180deg);
}
鼠标放上此三角形后会变成下面的样子
3D转换
3D转换是在三维空间的转换
与三维转换相关的属性也为transform
1.rotate3d(x,y,z,angle) 定义 3D 旋转
2.rotateX(angle) 定义沿 X 轴的 3D 旋转。
3.rotateY(angle) 定义沿 Y 轴的 3D 旋转。
4.rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
应用举例：
div{
border-left-color: transparent;
border-bottom-color:transparent;
border-top-color:yellowgreen;
border-right-color:transparent;
width: 0px;
height: 0px;
border-width:100px;
border-style: solid;
/*transform:*/
}
div:hover{
transform:rotateX(120deg);
}
页面效果如下
鼠标放上效果如下（绕x轴旋转了120°）
标签：CSS3,angle,定义,2D,转换,border,3D 来源： https://blog.csdn.net/qq_61601160/article/details/121745402
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。