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

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請點(這里)[/css3/translate.html]

translate(a, b)：用官方的話說叫做2D轉移，其實就是平面上的x軸和y軸移動，搞那么多名詞就是因為我們學識太低，不想讓我們容易了解

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

起點在左上角哈，但是如果元素位置開始就設置了非原點的話就另說了，就是在元素基礎上做計算

原點(0,0)-------

|

|

|

transition 動畫過渡

transition： property duration timing-function delay

property - css屬性

duration - 動畫執行時長 如果為0 動畫不執行

timing-function 動畫執行方式 默認ease

delay - 動畫延遲執行時間 默認0

總結

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。