1.CSS3變形

變形簡介

(1)CSS3變形是一些效果的集合，如平移、旋轉、縮放、傾斜效果，每個效果都可以稱為變形(transform)，它們可以操控元素發生平移、旋轉、縮放、傾斜等變化。

語法：transform：[transform-function]*；

(1)transform-function：設置變形函數，可以是一個也可以是多個，中間用逗號隔開

①translate()：平移函數，基于x、y坐標重新定位元素的位置

②scale()：縮放函數，可以使用任意元素對象尺寸發生變化

③rotate()：旋轉函數，取值是一個度數值

④skew()：傾斜函數，取值是一個度數值

(2)transform 3D變形函數：translate3d()平移函數、scale3d縮放函數、rotate3d旋轉函數

2D變形的瀏覽器兼容性

2D變形

(1)2D位移：將元素從一個位置上移動到另一個位置上

語法：translate(tx，ty);

①tx：橫坐標移動的向量長度，正值向右，負值向左

②ty：縱坐標移動的向量長度，正值向下，負值向上

③tx、ty常用單位是px，也可以是百分比

(2)當translate()函數只有一個值的時候，表示水平偏移；如果只設置垂直偏移，就必須設置第一個參數為0，第二個值是垂直偏移量

2D

總結

以上是生活随笔為你收集整理的css 两边到中间 渐变_css3渐变过渡机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。