transform 2D 平面轉(zhuǎn)換在以前我們改變?cè)氐奈恢眯枰O(shè)置 left 、 right 這類(lèi)的屬性，它對(duì)其它元素有很大的影響，現(xiàn)在通過(guò) transform 就可以實(shí)現(xiàn)任意空間的改變了。 1. 官方解釋CSS transform 屬性允許你旋轉(zhuǎn)，縮放，傾斜或平移給定元素。這是通過(guò)修改 CSS 視覺(jué)格式化模型的坐標(biāo)空間來(lái)實(shí)現(xiàn)的。 2. 解釋transfrom 這個(gè)屬性可以改變一個(gè)目標(biāo)元素在頁(yè)面中的位置，例如相對(duì)原來(lái)元素所在的位置平移，相對(duì)原來(lái)的尺寸放大或者縮小，也可以旋轉(zhuǎn)或者斜切。 3. 語(yǔ)法通用坐標(biāo)軸說(shuō)明: x 代表橫軸，y 代表縱軸。
包含參數(shù)： @H_301_63@ 值 描述 translate(x,y) 可以改變?cè)氐奈恢茫粫?huì)對(duì)相鄰元素由影響。 translateX(x) 只改變?cè)氐乃轿恢谩?translateY(y) 只改變?cè)卦谪Q直方向的位置。 scale(x,y) 元素縮放，x 代表水平方向，y 代表豎直方向。 scaleX(x) 僅對(duì)元素 x 方向上縮放。 scaleY(y) 僅對(duì)元素 y 方向上縮放。 skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。 skewX(angle) 定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。 skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。 rotate(angle) 在平面上旋轉(zhuǎn)一個(gè)角度 4. 實(shí)例接下來(lái)我們都是對(duì) demo 這個(gè)元素進(jìn)行操作。 <div class="demo"></div>
.demo{
transform: translate(px,px);
}效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
perspective: px;
transform-style: preserve-d;
}
.commn{
width:px;
height:px;
text-align: center;
line-height: px;
background:#f2f2f2;
border:px solid #ccc;
position: absolute;
top: ;
left: ;
}
.demo{
z-index: ;
opacity: ;
background: red;
}
.demo-3d{
transform:translated(px ,px ,-px) rotateZ(deg);
}
</style>
</head>
<body>
<div class="commn demo">transfrom3d</div>
<div class="commn demo-3d">transfrom3d</div>
</body>
</html>
.demo{
transform: translateX(px);
}效果圖
.demo{
transform: translateY(px);
}效果圖
.demo{
transform: scale(,);
}scale 接受一個(gè)倍數(shù)大于 1 時(shí)候放大，小于 1 時(shí)候縮小。當(dāng) x，y 參數(shù)的值一樣時(shí)，可以如下面這樣寫(xiě)： .demo{
transform: scale();
}如果只需要對(duì)水平方向縮放，可以向下面這樣寫(xiě)，豎直方向同理： .demo{
transform: scaleX();
}效果圖
.demo{
transform:skew(deg,deg);
}效果圖
.demo{
transform:skew(deg,deg);
}效果圖
如果只是對(duì)一個(gè)方向斜切可以如下： .demo{
transform:skewX(deg);
}
.demo{
transform:rotate(deg);
}效果圖
5. 兼容性@H_301_63@ IE Edge Firefox Chrome Safari Opera ios android 9+ 12+ 28+ 4+ 6.1+ 12.1+ 7+ 4.4 6. 場(chǎng)景
7. 小結(jié)
|
