CSS變形

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;設置背面可見或不可見

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • CSS的變形對應的屬性是transform,它的作用是修改元素自身的坐標空間。這個修改實際對應了一個坐標系統映射轉...
    荷小音閱讀 1,142評論 1 5
  • 變形包括2d變形和3d變形 transform2D變形 transform(none| +),可以寫多個方法一起但...
    惡魔企鵝閱讀 422評論 0 0
  • 看了很多視頻、文章,最后卻通通忘記了,別人的知識依舊是別人的,自己卻什么都沒獲得。此系列文章旨在加深自己的印象,因...
    DCbryant閱讀 1,896評論 0 4
  • 2D變形:transform :rotate();旋轉,()中寫度數 如:90degtranslate(,);第一...
    陳老板_閱讀 398評論 0 0
  • 2015年7月1日 星期三 晴 今天突然翻到了一本日記。 上面的筆跡很丑。 第一眼看過去我差點給扔了,仔細一看,原...
    房房數閱讀 873評論 0 0