頁:
[1]
css: transition 與 transform的結合?
大家好先前在寫css的時後遇到了一些問題
我想要達到的效果是:
一個正方形的div，hover的時後
利用transition達到transform 旋轉(rotate) 和 傾斜(skew) 的漸變
且兩個效果都費時0.3秒
我知道寫法是
transition: transform 0.3s;
後面在寫一個hover去改變transform的內容
已執行成功
但，如果我的效果是要
一個正方形的div，hover的時後
利用transition達到transform 旋轉(rotate) 和 傾斜(skew) 的漸變
不一樣的是，
transform 的旋轉(rotate)，費時0.3秒
transform 的傾斜(skew)，費時3秒
也就是旋轉結束的時後、傾斜只跑了1/10的完成度這樣
請問各位大大
想要做到這樣的效果，在宣告transition 的時後，該怎麼宣告呢?
我試過 transition: rotate 0.3s, skew 3s;
跑不出想要的結果
還請幫忙解惑一下
...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div><div></div> rotate 和skew都是transform.
要用animation來做, 參考http://www.w3schools.com/css/css3_animations.asp 用animation做的話似乎沒有辦法中斷時reverse
而且這樣我transform的變動值就必須寫死
沒辦法像transition一樣那麼活
頁:
[1]