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

background-origin和background-origin和2D转换的更多相关文章

  1. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  2. css3之2D转换

    css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换 ...

  3. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  4. 02-css3之2D转换

    一.CSS3 -2D转换 转换(transform)可以实现元素的位移.旋转.缩放等效果.可以理解为变形. 1. 2D转换之移动translate 可以改变元素的页面中的位置,类似于定位. 1.1语法 ...

  5. CSS 3学习——transform 2D转换

    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...

  6. CSS3 2D 转换

    2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 您将在下一章学习 3D 转换. 实例 div { tra ...

  7. css3的2D转换

    CSS3的2D转换用transform来实现 1.rotate()   /*通过 rotate() 方法,元素顺时针旋转给定的角度.允许负值,元素将逆时针旋转.*/ 2.scal()   /*通过 s ...

  8. CSS 2D转换 matrix() 详解

    2D转换 IE10.Firefox.Opera 支持 transform 属性 Chrome.Safari 需要前缀 -webkit- . IE9 需要前缀 -ms- . translate():接收 ...

  9. css3学习总结7--CSS3 2D转换

    CSS3 转换 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D 转换 在本次,您将学到如下 2D 转换方法: 1. translate() 2. rotate() 3. ...

随机推荐

  1. Raspberry Pi (树莓派) 更换源 - stretch 版本

    Raspberry Pi 默认更新源访问速度慢,更换国内源速度提升.更换软件更新源 (/etc/apt/sources.list),更换系统更新源 (/etc/apt/sources.d/raspi. ...

  2. Tornado(1)

    概述 Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了 ...

  3. python中copy()和deepcopy()详解

    **首先直接上结论: —–我们寻常意义的复制就是深复制,即将被复制对象完全再复制一遍作为独立的新个体单独存在.所以改变原有被复制对象不会对已经复制出来的新对象产生影响.—–而浅复制并不会产生一个独立的 ...

  4. electron窗口间通信

    以下代码均来自于我开发的开源软件:想学吗 窗口A的渲染进程发消息给主进程 const { clipboard, ipcRenderer, remote } = require('electron'); ...

  5. 分布式SQL数据库中部分索引的好处

    在优锐课的java学习分享中,探讨了分布式SQL数据库中部分索引的优势,并探讨了性能测试,结果等. 如果使用局部索引而不是常规索引,则在可为空的列上(其中只有一小部分行的该列不具有空值),然后可以大大 ...

  6. 试着用workerman开发一个在线聊天应用

    聊天功能是很常见的一种功能,Workerman是一款开源高性能异步PHP socket即时通讯框架. 什么是Workerman? Workerman是一款 开源 高性能异步 PHP socket即时通 ...

  7. SQL语句--查找数据select

    查看全部数据库表参照地址:https://www.cnblogs.com/zhoulixiangblog/p/12078724.html 本文所用数据库表: prod_id vend_id prod_ ...

  8. 当接口请求体里的日期格式跟web页面日期格式不一致时,该如何处理呢?

    首先引入Unix纪元时间戳的概念:即格林威治时间(GMT,Greenwich Mean Time)1970年1月1日00:00:00,到当前时间的秒数.单位为秒(s). 那么当前时间的Unix纪元时间 ...

  9. MECE分析法

      概述 MECE分析法,是麦肯锡的第一个女咨询顾问 Barbara Minto 在金字塔原理中提出的一个很重要的原则. MECE分析法,全称Mutually Exclusive Collective ...

  10. 重磅来袭!Reactive 架构专场四城巡回演讲

    Reactive 究竟是什么?Reactive 对架构设计的影响和冲击,以及给开发方式带来的改变有哪些?为什么阿里巴巴.Pivotal.Facebook 纷纷在生产环境中实践 Reactive? 本次 ...