普歌-赤道团队：CSS3-2D转换(移动，旋转，缩放）
CSS-2D转换是什么？二维坐标系是什么？
转换(transform)是css中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果。
也可以把转换简单的理解为变形
一、要了解CSS-2D转换，首先要明白二维坐标系
在CSS中，二维坐标系是不同于数学中的坐标系哦！
如图：(上边为数学中的坐标轴，下边为二维坐标系)
1.位移(translate)
位移即为移动，移动盒子的位置我们学过三种方法：
- 定位
- 盒子的外边距
- 2D转换移动
位移的语法：
- transform:translate(x,y);
- transform:translate(x,y);
- 3.transform:translate(x,y);
代码如下（示例）：
<style>
div {
/*我们此处准备了一个宽和高均为200像素的粉色盒子*/
width: 200px;
height: 200px;
background-color:pink;
/* x就是x轴上移动位置 y就是y轴上移动位置 中间用逗号分隔 */
/* 示例：transform:translate(x,y); */
/* transform:translate(100px,100px); 即为盒子在x轴上移动100像素，在y轴上移动100像素*/
/* 一.我们如果只移动x坐标，但是必须要写y坐标为零(下面为div盒子在x轴上移动的两种代码写法) */
/* 1.transform:translate(100px,0); */
/* 2.transform:translateX(100px); */
/* 二.我们如果只移动y坐标,X坐标为零(下面为div盒子在y轴上移动的两种代码写法) */
/* 1.transform:translate(0,100px); */
/* 2.transform:translateY(100px); */
}
/*此处设置两个div盒子进行效果展示*/
div:first-child {
transform:translate(30px,30px);
}
div:last-child {
background-color: purple;
}
</style>
2D位移中的重点：
- 定义2D转换中的移动，沿着X和Y轴移动元素
- trasnslate最大的优点，并不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%)
- 对于是行内标签没有的效果
2.旋转(rotate)
2D旋转是指让元素在二维平面内顺时针或者逆时针旋转
旋转的语法：
transfrom:rotade(度数)
代码如下（示例）：
此处楼主向body里面添加一张图片，有利于显示旋转效果，并且给图片加入了五像素的粉色圆形边框，加入了0.3秒的过渡，鼠标移动到图片上方即可看到效果。
<style>
img {
width: 150px;
/*顺时针旋转45°*/
/* transform:rotate(45deg); */
border-radius: 50%;
border: 5px solid pink;
/* 过渡写到本身上，谁做动画给谁加 */
transition: all 0.3s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./pic.jpg" alt="">
</body>
- rotate里面跟度数，单位是deg 示例：rotate(45deg);
- 角度为正时，顺时针，角度为负时，为逆时针。
- 默认旋转角度的中心点是元素的中心点
3.缩放(scale)
缩放，顾名思义，可以放大和缩小。只要给元素添加这个属性就可以控制它是放大还是缩小。
缩放的语法：
transfrom:scale(x,y);
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transform-origin: left bottom;
}
div:hover {
/* 1.里面写的数字不跟单位，就是倍数的意思 1就是1倍 2就是2倍 */
/* transform:scale(x,y); */
/* transform:scale(2,2);*/
/*2. 修改后宽度为原来的两倍 宽度为原来的一倍 */
/* transform:scale(2,1); */
/* 3.等比例缩放 同时修改宽度和高度，我们有简单的写法，宽度修改为2倍，高度默认和第一个一样 */
transform: scale(2);
/* 4.我们可以进行缩小 小于1就是缩放 */
/* transform:scale(0.5,0.5); */
transform: scale(0.5);
/* 5.scale的优势:不会影响其他盒子，而且不会影响盒子中心点 */
}
</style>
</head>
<body>
<div></div>
</body>
缩放中的注意点：
- 注意其中的X和Y用逗号隔开
- transfrom:scale(1,1);宽度和高度都放大一倍，也就是没有变
- transfrom:scale(2,2);宽度好高度都放大的两倍
- transfrom:scale(2)只写了一个参数，第二个参数则和人第一个参数一样，相当于scale(2,2);
- transfrom:(0.5,0.5);宽度与高度都缩小0.5倍
- scale缩放的最大优势，可以设置转换中心点缩放，而且不影响其他盒子
大家喜欢的话点个赞，评论一下哇！谢谢支持！
本文仅仅简单介绍了CSS-2D转换中，位移(translate)，旋转(rotate)， 缩放(scale)的使用。希望各位前端攻城狮给作者多提一些建议，文中有错误或者不当之处，评论区里请留言，作者定会及时改正！谢谢！ 另外祝大家2021年，牛年大吉，牛运亨通！