<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body, div {
margin:0;
padding:0;
}
div {
width: 100px;
height: 100px;
background-color: burlywood;
margin-left: 50px;
border: 1px solid red;
display: inline-block;/*不換行,但是可以設置width跟height*/
}
/*
translate(tx, ty)
該函數設置html組件橫向移動tx距離,縱向移動ty距離。如果ty省略那麼,默認是0。
translate(tx) -> translateX(tx)
translate(ty) -> translateY(ty)
*/
.translate-original {}
.translate-now {
-webkit-transform: translate(10px, 10px);
}
/*
rotate(angle)單位是deg
該函數設置html組件順時針旋轉angle角度
*/
.rotate-now {
-webkit-transform: rotate(30deg);
}
/*
scale(sx, sy);
該函數設置設置HTML組件上橫向縮放比爲sx,縱向縮放比爲sy,如果只寫一個參數,sy省略,默認是sy==sx。
scaleX(sx)
scaleY(sy)
*/
.scale-now {
-webkit-transform: scale(1.5, 0.5);
}
.scale-now2 {
-webkit-transform: scale(0.5, 1.5);
}
/*
skew(sx, sy)
該函數設置html組件沿着x軸傾斜sx角度,沿着y軸傾斜sy角度,如果只寫一個參數,sy默認是0。
skewX(sx) skewY(sy)
*/
.skew-now {
-webkit-transform: skew(45deg, 0deg);
}
.skew-now2 {
-webkit-transform: skewY(45deg);
}
/*複合*/
.component {
-webkit-transform: skewY(45deg) scale(1.5, 0.5);
}
/*指定中心點*/
.center {
-webkit-transform: skewY(45deg);
-webkit-transform-origin: left top;
}
/*
matrix(m11, m12, m21, m22, dx, dy);
矩陣變換函數,前四個參數將組成變形矩陣,dx和dy負責將座標進行平移。
每個座標點由(dx, dy)變爲(x*m11 + y*m21 + dx, x*m12 + y*m22 + dy);
eg -> matix(1.5, 0, 0, 1, 0, 0);
(x*1.5 + y*0 + 0, x*0 + y*1 + 0);
(1.5x, y)
*/
.matrix {
-webkit-transform: matrix(1.5, 0, 0, 1, 0, 0);
}
/*
rotateX(angle),3D轉換,沿着X軸轉動
rotateY(angle),3D轉換,沿着Y軸轉動
*/
.rotateX {
-webkit-transform: rotateX(70deg);
}
.rotateY {
-webkit-transform: rotateY(70deg);
}
</style>
</head>
<body>
<div>文字</div>
沒有變動
<div>文字</div>
<hr/>
<div>文字</div>
移動10px 10px
<div class="translate-now">文字</div>
<hr/>
<div>文字</div>
旋轉30度
<div class="rotate-now">文字</div>
<hr/>
<div>文字</div>
縮放1.5, 0.5
<div class="scale-now">文字</div>
<hr/>
<div>文字</div>
縮放0.5, 1.5
<div class="scale-now2">文字</div>
<hr/>
<div>文字</div>
x軸傾斜45度
<div class="skew-now">文字</div>
<hr/>
<div>文字</div>
y軸傾斜45度
<div class="skew-now2">文字</div>
<hr/>
<div>文字</div>
y軸傾斜45度 並且縮放1.5,0.5
<div class="component">文字</div>
<hr style="margin-top: 50px"/>
<div>文字</div>
y軸傾斜45度 中心爲left top
<div class="center">文字</div>
<hr style="margin-top: 120px"/>
<div>文字</div>
矩陣的參數爲1.5, 0, 0, 1, 0, 0
<div class="matrix">文字</div>
<hr style="margin-top: 120px"/>
<div>文字</div>
沿着x軸滾動70deg
<div class="rotateX">文字</div>
<hr style="margin-top: 120px"/>
<div>文字</div>
沿着y軸滾動70deg
<div class="rotateY">文字</div>
</body>
</html>
CSS佈局--transform應用(矩形旋轉、縮放、傾斜、滾動、3D轉換)代碼
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.