translate和transition一直讓我覺得，很牛皮很強(qiáng)大，怎么也學(xué)不會，其實(shí)是自己比較抗拒去了解她，接口看了不到半個小時的文檔，大概了解了下，下面是示例，可以下載下來自己運(yùn)行下試試

translate和transition

div {

width: 100px;

height: 75px;

background-color: red;

border: 1px solid black;

}

div#translate {

transition: all 2s;

-ms-transition: all 2s;

-webkit-transition: all 2s;

}

div#translate:hover{

transform: translate(50px, 100px);

-ms-transform: translate(50px, 100px);

-webkit-transform: translate(50px, 100px);

}

Hello, This is a Div elementHello, This is another Div element

演示demo請點(diǎn)(這里)[/css3/translate.html]

translate(a, b)：用官方的話說叫做2D轉(zhuǎn)移，其實(shí)就是平面上的x軸和y軸移動，搞那么多名詞就是因?yàn)槲覀儗W(xué)識太低，不想讓我們?nèi)菀琢私?/p>

a - 在橫向(左右方向)也就是x軸移動a單位距離，比如是10px，那么就移動10px，正值向右移動，負(fù)值向左移動 b - 在縱向(上下方向)也就是y軸移動b單位距離，比如是50px，那么就移動10px，正值向下移動，負(fù)值向上移動

起點(diǎn)在左上角哈，但是如果元素位置開始就設(shè)置了非原點(diǎn)的話就另說了，就是在元素基礎(chǔ)上做計算

原點(diǎn)(0,0)-------

|

|

|

transition 動畫過渡

transition： property duration timing-function delay

property - css屬性

duration - 動畫執(zhí)行時長 如果為0 動畫不執(zhí)行

timing-function 動畫執(zhí)行方式 默認(rèn)ease

delay - 動畫延遲執(zhí)行時間 默認(rèn)0

總結(jié)

到此這篇關(guān)于css3 中translate和transition的使用方法的文章就介紹到這了,更多相關(guān)css3 translate transition 使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

總結(jié)

以上是生活随笔為你收集整理的html5中translate,css3 中translate和transition的使用方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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