transform 2D 平面轉換在以前我們改變元素的位置需要設置 left 、 right 這類的屬性，它對其它元素有很大的影響，現在通過 transform 就可以實現任意空間的改變了。 1. 官方解釋CSS transform 屬性允許你旋轉，縮放，傾斜或平移給定元素。這是通過修改 CSS 視覺格式化模型的坐標空間來實現的。 2. 解釋transfrom 這個屬性可以改變一個目標元素在頁面中的位置，例如相對原來元素所在的位置平移，相對原來的尺寸放大或者縮小，也可以旋轉或者斜切。 3. 語法通用坐標軸說明: x 代表橫軸，y 代表縱軸。
包含參數： @H_301_63@ 值 描述 translate(x,y) 可以改變元素的位置，而不會對相鄰元素由影響。 translateX(x) 只改變元素的水平位置。 translateY(y) 只改變元素在豎直方向的位置。 scale(x,y) 元素縮放，x 代表水平方向，y 代表豎直方向。 scaleX(x) 僅對元素 x 方向上縮放。 scaleY(y) 僅對元素 y 方向上縮放。 skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。 skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。 skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。 rotate(angle) 在平面上旋轉一個角度 4. 實例接下來我們都是對 demo 這個元素進行操作。 <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 接受一個倍數大于 1 時候放大，小于 1 時候縮小。當 x，y 參數的值一樣時，可以如下面這樣寫： .demo{
transform: scale();
}如果只需要對水平方向縮放，可以向下面這樣寫，豎直方向同理： .demo{
transform: scaleX();
}效果圖
.demo{
transform:skew(deg,deg);
}效果圖
.demo{
transform:skew(deg,deg);
}效果圖
如果只是對一個方向斜切可以如下： .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. 場景
7. 小結
|
