標籤:順時針 height span blog iam lan ima 有用 blank
在上一篇中,我們學習了如何使用transform來進行2D變形。今天要講述的transform-origin與這個變形有關。
origin翻譯過來的意思是原點、開端。transform-origin寓意即變形的起點。沒錯,它的作用就是設定變形的起點。
transform-orgin:x-axis y-axis z-axis;
翻譯過來就是:
transform-origin:X軸 Y軸 Z軸;
X軸:left 、center 、right 、百分比、長度
Y軸:top、center、bottom、百分比、長度
Z軸:長度
一般2D變形沒有用到Z軸這個參數。
接下來讓我們實踐一下,更容易明白。
以順時針旋轉20度為例:
1、沒有設定transform-orgin時,變形起點預設為中心點:
.trans1{ z-index:-1; position:absolute; top:100px; left:100px; width:100px; height:100px; border:1px solid red; background-color:blue; color:yellow; } .trans2{ z-index:1; position:absolute; top:100px; left:100px; width:100px; height:100px; border:1px solid red; background-color:black; color:red; transform:rotate(10deg); }
結果:
2、設定變形的起點為盒子的右下角,即transform-origin:right bottom;
.trans1{ z-index:-1; position:absolute; top:100px; left:100px; width:100px; height:100px; border:1px solid red; background-color:blue; color:yellow; } .trans2{ z-index:1; position:absolute; top:100px; left:100px; width:100px; height:100px; border:1px solid red; background-color:black; color:red; transform:rotate(10deg); transform-origin:right bottom; }
結果:
每天CSS學習之transform-origin