background-origin和background-origin和2D转换

Posted 2021-02-10 iwishicould

1--》 background-origin:可以定义背景图片的定位区域，它有3个属性值
background-origin:border-box /padding-box/ content-border;

border-box==》背景图片以边框为基准定位
padding-box==》背景图片以padding为区域，或者说以边框内侧为区域定义
content-border==》背景图片以内容区域进行定位

2==> 可以定义背景图片的裁剪区域；
background-clip: border-box; //默认值，裁剪超出盒子边框的背景图片
background-clip: padding-box; //裁剪超出盒子内边距的背景图片
background-clip: content-box; //裁剪超出盒子内容的背景图片

3==> 背景属性的简写
background:pink(背景色） url(背景图) no-repeat 图片位置(center)/图片的尺寸(cover) 定位的区域 裁剪区域；

 

4==> 转换分为2D转换，3D转换
转换有4个属性 (1)移动translate (2)旋转rotate (3)scale缩放 (4)倾斜skew

/*1--》浏览器器只会显示最后的位置，显示移动后的位置 在X轴向右移动20px 在Y轴向下移动30px*/
transform: translate(20px,30px);

你可以使用translateX和translateY，分别设置X轴和Y轴

/*2--》顺时针方向 旋转45度 如果值是负数 旋转方向是逆时针*/
transform: rotate(45deg);

/*3--》语法 scale(x,y) 如果你只有一个参数 第二个参数和第一个默认相同*/
/*将元素放大或者缩小 大于1，放大1.2倍 小于1，缩小 */
transform: scale(1.2);
/*scaleX和scaleY分别设置在X和Y轴上*/

4 倾斜
transform: skewX(45deg); /*会沿着x轴的方向上倾斜45deg*/
transform: skewY(-45deg); /*沿着Y轴的方向上倾斜负45deg*/
transform: skew(45deg,-45deg);

5总结：你也可以只用transform写多个转换的函数 多个函数使用空格隔开
transform:scale(1.2) rotate(45deg); 他会先扩大 然后在旋转 最后显示在屏幕上

5==> matrix它是矩阵函数 它集前面几个函数于一生 你可以去看一下 这个矩阵函数有6个值
matrix(移动，旋转，缩放，倾斜）

6==> transform-origin: 转换的基准点 css中转换的基准点是元素的中心
transform-origin:center; //以元素的中心为转化的基准点
transform: x,y;//x值有left center right y值有 top center bottom