01.CSS动画--transform
生活随笔
收集整理的這篇文章主要介紹了
01.CSS动画--transform
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
transform:
translate(參數1，參數2)；讓元素在X軸與Y軸方向發生偏移-->參數1：X；參數2：Y
rotate(參數1)；讓元素進行旋轉；單位(deg)
scale(參數1，參數2)；讓元素在X軸與Y軸放大或縮小多少倍-->參數1：X；參數2：Y
skew(參數1，參數2)；skew(30deg,20deg)-->圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度
transition:過渡效果
transition: all 1s linear 3s;
*過渡效果
| 1 2 3 4 | <em?id="__mceDel"> 參數1：用來指定對那些屬性使用過渡效果 參數2：過渡效果的持續時間 參數3：過渡效果的顯示速度變化 參數4：用來指定過渡效果的延遲時間*/</em> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<style> ????????#div1{ ????????????width: 100px; ????????????height: 100px; ????????????/*過渡效果 ???????????????參數1：用來指定對那些屬性使用過渡效果 ???????????????參數2：過渡效果的持續時間 ???????????????參數3：過渡效果的顯示速度變化 ???????????????參數4：用來指定過渡效果的延遲時間*/ ????????????transition: all 1s linear 3s; ????????????border: 1px solid red; ????????????margin: auto; ????????????background-image: url("../../../img/f3_Android1.png"); ????????????background-size: 100% 100%; ????????} ????????#div1:hover{ ????????????/*translate：讓元素在X和Y軸發生偏移 參數1：X軸方向偏移? 參數2：Y軸方向偏移 ??????????????translatex:讓元素在X軸方向發生偏移 ??????????????translatey:讓元素在Y軸方向發生偏移*/ ????????????/*transform: translate(50px,0);*/ ????????????/*scale:讓元素在X軸和Y軸都發生縮放? 參數1：X軸方向的方法倍數 參數2：Y軸方向的放大倍數 ??????????????scaleX：讓元素在X軸方向發生縮放 ??????????????scaleY：讓元素在Y軸方向發生縮放*/ ????????????transform: scaleX(1.5); ????????????/*rotate：讓你的元素按照指定的中心點進行旋轉 ????????????????rotateX:讓元素沿著X軸旋轉 ????????????????rotateY：讓元素沿著Y軸旋轉 ????????????*/ ????????????/*transform: rotateY(180deg);*/ ????????????/*transform: skewY(-90deg);*/ ????????????/*transform-origin:用來設置旋轉的中心點*/ ????????????/*transform-origin: left;*/ ????????} ????</style> ????<title>變形效果</title> </head> <body> <div?id="div1"> </div> </body> </html> |
轉載于:https://www.cnblogs.com/gfl123/p/7881651.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的01.CSS动画--transform的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： simple2.py
- 下一篇： CSS，让100%的宽度，自动减10，让