background-origin
设置元素背景图片的原始起始位置。必须保证背景是background-repeat为no-repeat
此属性才会生效。
可取值有 border-box | padding-box | content-box
border-box：设置背景图片原点在边框的最左上角
- 1 .img{2 background-image:url(1.jpg);3 background-repeat:no-repeat;4 background-origin:border-box;5 }6 7 <div class="img"></div>
登录后复制
padding-box：设置背景图片原点在内边距的最左上角
- 1 .img{2 background-image:url(1.jpg);3 background-repeat:no-repeat;4 background-origin:padding-box;5 }6 7 <div class="img"></div>
登录后复制
content-box：设置背景图片原点在内容区域的最左上角
- 1 .img{2 background-image:url(1.jpg);3 background-repeat:no-repeat;4 background-origin:content-box;5 }6 7 <div class="img"></div>
登录后复制background-clip
设定背景图像向外裁剪的区域。
可取值有 border-box | padding-box | content-box
立即学习“前端免费学习笔记（深入）”；
border-box：设置裁剪区域为边框以内，包括边框
- 1 .img{2 background-image:url(1.jpg);3 background-clip:border-box;4 }5 6 <div class="img"></div>
登录后复制
padding-box：设置裁剪区域为内边距以内，包括内边距
- 1 .img{2 background-image:url(1.jpg);3 background-clip:padding-box;4 }5 6 <div class="img"></div>
登录后复制
content-box：设置裁剪区域为内容区域
- 1 .img{2 background-image:url(1.jpg);3 background-clip:content-box;4 }5 6 <div class="img"></div>
登录后复制transform
改变元素的大小，透明，旋转角度，扭曲度等。
语法：
transform：none | +
transform-function包含以下几个方法：
translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
transform-origin:任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。
translateX()： 指定对象X轴（水平方向）的平移
translateY()： 指定对象Y轴（垂直方向）的平移
rotate()： 指定对象的2D rotation（2D旋转），需先有 属性的定义
scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
skew()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translate：向X轴和Y轴分别偏移元素自身的50%
- 1 .img{2 width:200px;3 height:200px;4 background-image:url(1.jpg);5 transform: translate(50%,50%);6 }7 8 <div class="img"></div>
登录后复制
transform-origin：把元素的中心点设置在0 0位置，即左上角
- 1 .img{2 width:200px;3 height:200px;4 background-image:url(1.jpg);5 transform-origin:0 0;6 transform: translate(50%,50%);7 }8 9 <div class="img"></div>
登录后复制
translateX：仅设置X轴的偏移
- 1 .img{2 width:200px;3 height:200px;4 background-image:url(1.jpg);5 transform: translateX(50%);6 }7 8 <div class="img"></div>
登录后复制
translateY：仅设置Y轴的偏移
- 1 .img{2 width:200px;3 height:200px;4 background-image:url(1.jpg);5 transform: translateY(50%);6 }7 8 <div class="img"></div>
登录后复制
rotate：设置元素进行2D旋转，接受的参数为角度（deg）
- 1 .img{2 width:200px;3 height:200px;4 background-image:url(1.jpg);5 transform: rotate(180deg);6 }7 8 <div class="img"></div>
登录后复制
scale：设置元素缩放3倍，接受的参数为数值，表示放大的倍数
- 1 .img{2 width:200px;3 height:200px;4 background-image:url(1.jpg);5 transform: scale(3);6 }7 8 <div class="img"></div>
登录后复制
skew：设置元素的倾斜角度
- 1 .img{2 width:200px;3 height:200px;4 background-image:url(1.jpg);5 transform: skew(60deg);6 }7 8 <div class="img"></div>
登录后复制
translate3d：设置元素的3d位移
- 1 .img{2 width:200px;3 height:200px;4 background-image:url(1.jpg);5 transform: translate3d(50px,50px,1px);6 }7 8 <div class="img"></div>
登录后复制
