2D转换
移动translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
1.语法
transform: translate(x,y); 或者分开写
transform: translateX(n) ;
transform: translateY(n) ;
2.重点
●定义2D转换中的移动,沿着X和Y轴移动元素
●translate最大的优点:不会影响到其他元素的位置
●translate中的百分比单位是相对于自身元素的translate:(50%,50%);（常用于使盒子水平居中，垂直居中，配合定位使用）
●对行内标签没有效果
旋转rotate
1.语法
transform:rotate(度数)
2.重点
●rotate里面跟度数,单位是deg比如rotate(45deg)
●角度为正时,顺时针,负时,为逆时针
●默认旋转的中心点是元素的中心点
转换中心点 transform-origin
1.语法：
transform-origin: x y;
2.重点
●注意后面的参数x和y用空格隔开
●x y默认转换的中心点是元素的中心点(50% 50%)
●还可以给xy设置像素或者方位名词( top bottom left right center )
缩放scale
1.语法
transform:scale(x,y)
2.注意：
●注意其中的x和y用逗号分隔
●transform:scale(1,1) : 宽和高都放大一倍,相对于没有放大
●transform:scale(2,2) : 宽和高都放大了2倍
●transform:scale(2) : 只写一个参数,第二个参数则和第一个参数-样,相当于scale(2,2)
●transform:scale(0.5,0.5) :缩小
●sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,且不影响其他盒子
2D转换综合写法
注意
1.同时使用多个转换,其格式为: transform: translate() rotate() scale() ...等
2.其顺序会影响转换的效果。( 先旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候,记得要将位移放到最前
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
100px;
height: 100px;
border: 1px solid magenta;
margin: 100px auto;
/*添加过渡效果*/
transition: all 2s;
}
div:nth-child(1):hover{
transform: translateX(200px);
}
div:nth-child(2):hover{
transform: rotate(60deg);
}
div:nth-child(3):hover{
transform: scale(2);
}
div:nth-child(4):hover{
transform:skew(30deg,30deg);
}
div:nth-child(5):hover{
transform: translateX(200px) rotate(60deg) rotate(60deg) scale(2) skew(30deg,30deg);
}
div:nth-child(6):hover{
transform: rotate(60deg) rotate(60deg) scale(2) skew(30deg,30deg) translateX(200px) ;
}
</style>
</head>
<body>
<div>2D平移</div>
<div>2D旋转</div>
<div>2D缩放</div>
<div>2D扭曲</div>
<div>2D综合</div>
<div>2D综合2</div>
</body>
</html>