CSS3-2D转换transform

2D转换之translate（重点）

基本语法

属性：transform,属性值：translate(X,Y),属性值也可以分开书写：

       transform:translate(X,Y)         

       transform:translateX(n)         

       transform:translateY(n)

            transform: translate(50%, 50%);

            transform: translateX(50%);

            transform: translateY(50%);

注意：

01、2D转换中的移动translate是沿着X轴和Y轴进行移动的，对行内元素直接设置是不生效的，如果想要生效就要转化为块或者行内块；

02、translate改变元素在页面中的位置，类似定位，不会影响到其他元素的位置，所以我们不用担心元素脱离文档流；

03、translate的取值可以是实际的像素值:translate(100px,200px),也可以是百分比:translate(50%,50%),如果设置的是百分比那么移动的位置是盒子自身宽高的相对值，比如50%就是自己的宽高的一半；

04、如果转换和定位同时存在，2d转换在定位的书写位置后面，就会将定位的盒子压住，我们可以给定位的盒子设置z-index调节位置；

定位的盒子水平垂直居中设置

绝对定位和固定定位的盒子不能使用margin:auto;设置水平居中，如果想要居中我们就需要如下设置：

设置定位盒子的left :50%; 设置盒子的margin-left:-自己的宽度的一半，让盒子水平居中；

设置定位盒子的top :50%; 设置盒子的margin-top:-自己的高度的一半，让盒子垂直居中；

我们现在可以将margin-left和margin-top的取值用2d位移取值为百分比进行替换，哪怕盒子没有固定的宽高都可以生效；

            position: fixed;

            left: 50%;

            top: 50%;

            width: 300px;

            height: 300px;

            /* margin-left: -150px;

            margin-top: -150px; */

            /* translate取值为百分比是盒子自身宽高的百分比，比如50%就相当于300的一半150 */

            transform: translate(-50%, -50%);

2D转换之rotate（重点）

基本语法

属性：transform   属性值：  rotate(度数)；

transform:rorate(度数)   ----- 度数的单位是deg ；

transform: rotate(30deg);

注意

01、rotate后面的度数，如果是正数就是顺时针旋转，如果是负数就是逆时针旋转；

02、rotate旋转默认的中心点是元素的中心点；

03、rotate旋转得到度数表示旋转到某一个度数不是旋转了，也就是从当前的度数旋转到另一个度数；

2D转换之中心点（重点）

语法：transform-origin：X  Y;

01、两个参数X和Y之间是用空格隔开的;

02、X和Y默认的转换中心点取值为(50%  50%);

03、X和Y也可以设置实际的像素值或者方位名词（top、bottom、left、right、center）；

2D转换之scale（重点）

语法：transform：scale(X,Y);  

1. 两个参数X和Y之间是用逗号隔开的;
2. X和Y的取值如果等于1表示原始大小，小于1表示缩小倍数，大于1表示放大倍数；
3. X和Y如果只写一个值表示两个参数都是一样；
4. Scale缩放最大的优势：可以设置转换中心点缩放，默认是中心缩放，还不会影响其他盒子的显示位置；

2D转换综合写法以及顺序问题（重点）

            /* transform: translateX(1200px);

            transform: rotate(360deg);

            transform: scale(3); */

            transform: translateX(1200px) rotate(360deg) scale(3);

如果三个属性要同时存在，我们需要用空格将各个属性隔开，位移属性必须写在第一位；

如果将旋转放在第一位，旋转的之后会将网页的坐标系也进行了旋转，所以效果会出现问题；

transform:skew( 角度 )

transform: skew(-30deg);

(1)    设置一个参数表示X 轴方向角度（一般2D我们只需要设置一个值即可）

(2)    设置二个参数中间用逗号隔开，分别表示 水平和垂直。

(3)    角度值可以为正也可以为负