1.transform ?角度變化
語法:transform(ratate(ndeg))
2.translate ?位置偏移
且參照物為當前盒子的大小
語法:translate(<translation-value><translation-value>)
例子:translate(x軸值 y軸值)translateX translateY 當只有一個值時,未說明的值為0
3.scale ?圖形縮放
語法:scale(<number><number>)代表X軸 Y軸 且Y軸可以省略,當省略時等于X軸的值
例子:scale(1,2)scaleX scaleY
4.skew 傾斜
語法:skew(<angle><angle>)且第二個可以省略
例子:skewX 向X軸傾斜
? ? ? ? ? skewY 向Y軸傾斜
5當很多效果在一些寫時,一些效果的順序不同,會引起最終效果的不同
6.transform-origin 設置坐標軸圓心的位置
語法:①表示一個值的方位詞和百分比及長度
? ? ? ? ?②2個值(X Y)(當沒有標明值的時候對應的值為50%)
? ? ? ? ?③3個值(X Y Z)
例子:transform:50% 50%
? ? ? ? ? transform:0 0?
? ? ? ? ? transform:right 50px ?20px
7.perspective ?透視
語法:perspective ?none或長度
? ? ? ? ?perspective:none
? ? ? ? ? perspective :200px(大小為人眼到物體的距離,且距離越近,透視效果越強)
8.perspective-origin ?透視角度
? ?語法:①一個值 X
? ? ? ? ? ? ②兩個值 ?X Y
? ? ? ? ? ? ③三個值 X Y Z ??
9.translate 3d() ?3D移動
在3d空間中變換圖形
10.scale 3d()?
?在3d空間中放大縮小圖形
11rotate 在3d空間中旋轉圖形
語法:rotate? (<number><number><number><angle>)
12.transform-style
語法:transform-style :flat或preserve(扁平化或保留3d效果)
13.backface-visibility ?背面是否可見
例子:backface-visibility:vissble ?hidden;設置背面可見或不可見