1.CSS3變形

變形簡介

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

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

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

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

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

③rotate()：旋轉(zhuǎn)函數(shù)，取值是一個(gè)度數(shù)值

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

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

2D變形的瀏覽器兼容性

2D變形

(1)2D位移：將元素從一個(gè)位置上移動(dòng)到另一個(gè)位置上

語法：translate(tx，ty);

①tx：橫坐標(biāo)移動(dòng)的向量長度，正值向右，負(fù)值向左

②ty：縱坐標(biāo)移動(dòng)的向量長度，正值向下，負(fù)值向上

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

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

2D

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。