translate和transition一直讓我覺(jué)得，很牛皮很強(qiáng)大，怎么也學(xué)不會(huì)，其實(shí)是自己比較抗拒去了解她，接口看了不到半個(gè)小時(shí)的文檔，大概了解了下，下面是示例，可以下載下來(lái)自己運(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請(qǐng)點(diǎn)(這里)[/css3/translate.html]

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

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

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

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

|

|

|

transition 動(dòng)畫(huà)過(guò)渡

transition： property duration timing-function delay

property - css屬性

duration - 動(dòng)畫(huà)執(zhí)行時(shí)長(zhǎng) 如果為0 動(dòng)畫(huà)不執(zhí)行

timing-function 動(dòng)畫(huà)執(zhí)行方式 默認(rèn)ease

delay - 動(dòng)畫(huà)延遲執(zhí)行時(shí)間 默認(rèn)0

總結(jié)

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

總結(jié)

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

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