[TOC] # 2D坐标系xy轴  # 2D转换之移动（translate）  ## 2.重点（不会影响其他元素位置） ●定义2D转换中的移动,沿着X和Y轴移动元素 ●translate最大的优点 :不会影响到其他元素的位置 ●translate中的百分比单位是相对于自身元素的 trarislate:(50%,50%); ●对行内标签没有效果 ## 2D使用实验 |  |  | | --- | --- | translate水平居中，垂直居中 ~~~ width: 200px; height: 200px; background-color: C ] purple; position: absolute; /*（定位水平居中，垂直居中）*/ top: 50%; left: 50%; transform: translate(-50%, -50%); /* translate(-50%, -50%)盒子往上走自己高度的 一半 /* margin-top: - 100px ; margin-left: -100px; */ ~~~ # 2D转换之旋转rotate  ## 2.重点 ●rotate里面跟度数,单位是deg比如rdate(45deg) ●角度为正时,顺时针,负时,为逆时针 ●默认旋转的中心点是元素的中心点 ## 2Drotate旋转实验  # 2D转换中心点 transform-origin  ## 2.重点 ●注意后面的参数x和y用**空格**隔开 ●x y默认转换的中心点是元素的中心点(50% 50%) ●还可以给xy 设置像素或者方位名词( top bottom left right center ) ## transform-origin 实验  ## 旋转中心点实验 | 123 | 456 | | --- | --- | |  |  | # 2D转换之缩放scale  ## 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缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子 ## 缩放scale实验 | 使用 | 运用 | | --- | --- | # 综合案例（一边移动一边旋转） ~~~ /*我们同时有位移和其他属性，我们需要把位移放到最前面*/ I transform: translate(150px, 50px) rotate(180deg) scale(1.2); ~~~