css筆記 - transform學習筆記(二)

transform轉換

CSS transform

屬於2D/3D上的轉換、變形效果。他不是一個動畫，他就是變形。好比正方形變平行四邊形，再變圓形。都是形狀變成另外一個形狀。

可是若是配合上transition/animation，他就會從一個形狀變成另外一形狀。只要有一段時間內的過渡效果，就造成了動畫。

主要功能有：拉伸變形、傾斜、位移、縮放、旋轉。

原理是：改變元素的尺寸、形狀、角度、位置等

js寫法：

object.style.transform="rotate(7deg)";

transform-origin 設置元素的基點位置

該元素容許改變被轉換元素的位置

默認不設置的狀況下，x軸座標是(border-width + padding + width) / 2 + 'px'，第二個座標是(border-width + padding +height) / 2 + 'px';

transform-style 被嵌套元素在3D空間如何顯示

• 規定被嵌套元素如何在3D空間中顯示：

  • flat：表示子元素不保留3d位置、

  • preserve-3d表示 子元素保留3d位置

• 屬性值： flat、preserve-3d、unset、inherit、initial

• 須要與transform一同使用。

transform的各個方法屬性

name	含義
none	我不定義好很差
translate()	位移
rotate()	旋轉
scale()	縮放
skew()	拉伸變形
matrix()	混合, 集百家之大乘。

方法可能的配置

skew：翻轉給定的角度，xdeg水平翻轉度數，ydeg垂直翻轉度數。能爲負

D	name	含義	中心點	備註
2	skew(xdeg,ydeg)	拉伸變形	默認中心點就是盒模型的中心點
2	skewX(xdeg)	水平方向拉伸變形	同上
2	skewY(ydeg)	垂直方向拉伸變形	同上
2	skew(n-deg)	延伸，只寫一個也起做用，不過是隻默認做用於x軸水平拉伸。	同上

*　能夠爲負值，負值時翻轉拉伸的方向，好比以前是左上角－右下角拉伸，翻轉後變成右上角－左下角的拉伸。

scale：x對應寬度，y對應高度，縮放到原來寬高的倍數。

D	name	含義	中心點	備註
2	scale(x,y)	縮放	默認中心點就是盒模型的中心點
2	scale(n-deg)	縮放	默認中心點就是盒模型的中心點	和上邊的區別就是默認只縮放水平方向，就像scaleX(x)
3D	scale3d(x,y,z)	縮放	同上	我設置三個點和設置正常的兩個點沒什麼區別
2	scaleX(x)	橫向縮放	同上	正值時橫向拉伸，同skew的區別是：水平拉伸不帶斜線角度
2	scaleY(y)	縱向縮放	同上	正值時豎向拉伸，同skew的區別是：垂直拉伸不帶斜線角度
3D	scaleZ(z)	縱深方向縮放	同上	2d圖形設置沒有多大的區別，不過能夠看到文字微妙的變化

首先，縮放的倍數就是數字的實際倍數，好比寫2就是放大兩倍。再者，當數值是大於0的值時，就是放大。當數值在0-1之間的時候，就是縮小。因此 放大仍是縮小看的是數值的關係，和正負沒有關係。

數值爲0就是原來的寬高*0時就看不見了。

數值爲1是放大，可是是寬高*1，和沒乘同樣。還和原來一邊大。

另外，計算時不光是乘寬高，內邊距padding、邊框寬度border-width、甚至外邊距margin都跟着昇天乘了相應倍數

rotate：N°旋轉，正值順時針旋轉，負值逆時針旋轉。

D	name	含義	中心點	備註
2	rotate(angle)	旋轉	默認中心點就是盒模型的中心點	angle值
3D	rotate3d(x,y,z,angle)	N°旋轉	同上
3D	rotateX(angle)	N°旋轉	同上	圍繞x軸作水平方向翻轉
3D	rotateY(angle)	N°旋轉	同上	圍繞y軸作垂直方向翻轉
3D	rotateZ(angle)	N°旋轉	同上

translate(x,y)：相對於當前位置向水平(x)/垂直(y)方向移動，正值向右/下，負值向左/上

D	name	含義	中心點	備註
2	translate(x,y)	2d兩點位移	默認中心點就是盒模型的中心點
3D	translate3d(x,y,z)	3d三點位移	同上
2	translateX(x)	只是用 X 軸的值位移	同上
2	translateY(y)	只是用 Y 軸的值位移	同上
3D	translateZ(z)	只是用 Z 軸的值位移	同上

括號裏邊， 數值後邊必定要有單位值 ，若是沒有單位值不起做用

translate執行的位移，對於周圍的元素不產生任何影響。就像relative的效果。

matrix(n,n,n,n,n,n)

D	name	含義	中心點	備註
2	matrix(n,n,n,n,n,n)	矩陣，模型	默認中心點就是盒模型的中心點	6個值的矩陣
3D	matrix(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	矩陣，模型	同上	16個值,4x4矩陣

perspective 規定3D元素的透視效果

張鑫旭講解文章

perspective(n) 爲3D轉換元素設置透視視圖

• 規定3D元素的透視效果

• 目前瀏覽器都不支持，只有safari和chrome用替代元素-webkit-perspective

• 隻影響有3d轉換屬性的子元素，是加在父元素身上的。

• 須要配合perspective-origin一同使用。

perspective-origin 規定3D元素的底部位置

• 規定3D元素的底部位置 ？？

• 大體屬性同perspective

• perspective-origin : 50% 200px; 爲何第一個是百分比，第二個是像素值？能夠有的值或格式：top,bottom,center,length,%。

• x-axis 定義該視圖在x軸上的位置、

• y-axis 定義該視圖在y軸上的位置

perspective-visibility 定義元素在不面對屏幕時是否可見

混合寫法

多個屬性值之間用逗號隔開便可。

transform: rotate(30deg) scale(.2) skew(20deg);

兼容性及寫法

IE10+以上不用想，其餘現代瀏覽器

chrome、safari要加前綴-webkit-

ie9加前綴-ms-

前綴

transform: ;
-moz-transform: ;
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;