標籤：safari 元素 css oct :hover trident 使用 firefox web
1.2D，3D轉換
-1.通過2D，3D轉換，我們能夠對元素進行移動，縮放，轉動，拉長，或展開。
轉換是使元素改變形狀，尺寸和位置的一種效果。
可以使用2D或者3D轉換來轉換元素。
-2.2D(transform)轉換方法
1.translate（x，y）移動，第二個參數未提供時預設為0
2.rotate（xdeg）旋轉
3.scale（x，y）縮放
4.skew（xdeg，ydeg）傾斜，第二個參數未提供時預設為0
-3.3D轉換方法
1.rotateX（）
2.rotateY（）
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; background-color: aquamarine; } .change{ /**/ /*transform: translate(100px, 200px);*/ /*旋轉*/ /*transform: rotate(30deg);*/ /*縮放*/ /*transform: scale(0.5, 0.5);*/ /*傾斜*/ /*transform: skew(50deg,50deg);*/ /*transform: rotateX(120deg);*/ transform: rotateY(120deg); } </style></head><body> <div>這是一個初始效果</div> <br/> <div class="change">變換後效果</div></body></html>
瀏覽器核心
Webkit（Chrome/Safari） -webkit-transform
Gecko（Firefox） -moz-transform
Presto（Oprea） -o-transform
Trident(IE) -ms-transform
2.過渡
1.通過css3，我們可以在不適用任何Flash動畫或JavaScript的情況下，當元素從一種樣式變換為另一種樣式
時為元素添加效果。
2.css3過渡是元素從一種樣式逐漸改變為另一種的效果。
規定效果添加到哪個css屬性上
規定效果的時間長度
transiton 簡寫屬性，用於在一個屬性中設定4個過渡屬性
transition-property 規定應用過渡的css屬性的名稱，必須有
transition-duration 定義過渡效果花費的時間，預設為0，必須有
transition-timing-function 規定過渡效果的時間曲線，預設為“ease”
-1.linear：線性過渡，等同於貝茲路徑(0.0, 0.0, 1.0,1.0)
-2.ease:平滑過渡，等同於貝茲路徑(0.25，0.1,0.25，1.0)
-3.ease-in：由慢到快，等同於貝茲路徑（0.42,0.0,1.0,1.0）
-4.ease-out：由快到慢，等同於貝茲路徑(0.0，0.0，0.58，1.0)
-5.ease-in-out：由慢到快再到慢，等同於貝茲路徑（0.42，0.0，0.58，1.0）
transiton-delay 規定過渡效果何時開始，預設為0
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .first{ width: 100px; height: 100px; background-color: aquamarine; transition: width 2s ease-in-out; /*transition: background-color 2s;*/ } .first:hover{ width: 200px; /*background-color: purple;*/ } </style></head><body> <div class="first">效果</div></body></html>
css動畫效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
