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);
- 两个参数X和Y之间是用逗号隔开的;
- X和Y的取值如果等于1表示原始大小,小于1表示缩小倍数,大于1表示放大倍数;
- X和Y如果只写一个值表示两个参数都是一样;
- 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) 角度值可以为正也可以为负