css3 中translate和transition的使用方法

發(fā)布時(shí)間：2020-03-26 17:10:22 作者：Gowhich

這篇文章主要介紹了css3 中translate和transition的使用方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

<!DOCTYPE html>
<html>
<head>
  <title>translate和transition</title>
</head>
<body>
<style type="text/css">
  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);
  }
</style>
<div>Hello, This is a Div element</div>
<div id='translate'>Hello, This is another Div element</div>
</body>
</html>

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

translate(a, b)：用官方的話說叫做2D轉(zhuǎn)移，其實(shí)就是平面上的x軸和y軸移動(dòng)，搞那么多名詞就是因?yàn)槲覀儗W(xué)識(shí)太低，不想讓我們?nèi)菀琢私?br /> 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)在左上角哈，但是如果元素位置開始就設(shè)置了非原點(diǎn)的話就另說了，就是在元素基礎(chǔ)上做計(jì)算

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

transition 動(dòng)畫過渡

transition： property duration timing-function delay

property - css屬性

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

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

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

這四個(gè)是屬性，別以為我是寫了其他的屬性，具體的看(文檔)[https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition]

總結(jié)

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