CSS(四)：背景+變形

• 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>+
transform-function包含以下幾個方法：
translate()： 指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設值為0
transform-origin:任何一個元素都有一個中心點，預設情況之下，其中心點是居於元素X軸和Y軸的50%處。
translateX()： 指定對象X軸（水平方向）的平移
translateY()： 指定對象Y軸（垂直方向）的平移
rotate()： 指定對象的2D rotation（2D旋轉），需先有 <' transform-origin '> 屬性的定義
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>