background-origin和background-origin和2D转换
转换 2D Origin background
2023-09-27 14:22:21 时间
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
相关文章
- 【视频开发】OpenCV中Mat,图像二维指针和CxImage类的转换
- (三)vhdl如何转换转换verilog?(人肉翻译—保姆教学版)
- ffmpeg详解【用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序】【提供了录制、转换以及流化音视频的完整解决方案】
- Linux网络编程(五)-Socket编程01:概述(不同主机进程通讯)【通用socket结构体:sockaddr】【网络字节序:报头部分大于2字节的数据需大小端转换】【一套接字包含发送、接收缓冲区】
- 【精通Spark系列】Spark算子大合集,一文掌握spark中的常用转换与行动算子
- 数据库多行转换为单一列
- js 实现 Base64 编码的相互转换
- 485转换芯片
- C语言:八进制与二进制相互转换
- Flutter JSON解析与复杂模型转换技巧及实例
- 地理坐标转换 - 地理信息系统(3)
- 哪些操作符会进行隐式转换
- QString.toUtf8().data()的问题 & char *转换到QByteArray注意
- 使用Python,OpenCV实现简单的场景边界/拍摄转换检测器
- python字符串/Bytes/16进制/x01等之间的转换
- 使用poi将excel转换为html,适用本身有导出excel的而现在需要添加网页打印的功能
- [LeetCode]Word Ladder 最短距离字符串转换 (Dijkstra)
- python 字节与字符串转换
- 2009-05-21 10:32 c++ int/string转换
- 一文读懂rawRGB、RGB和YUV数据格式与转换
- kettle转换合并记录
- 【我的Android进阶之旅】推荐一款视频转换GIF图片格式的转换工具(Video to GIF)
- 【将有序数组转换为二叉搜索树(108-java)】