當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

01.CSS动画--transform

發(fā)布時(shí)間：2024/4/17 CSS 64 豆豆

生活随笔收集整理的這篇文章主要介紹了 01.CSS动画--transform 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

transform:　　

　　translate(參數(shù)1，參數(shù)2)；讓元素在X軸與Y軸方向發(fā)生偏移-->參數(shù)1：X；參數(shù)2：Y

　　rotate(參數(shù)1)；讓元素進(jìn)行旋轉(zhuǎn)；單位(deg)

　　scale(參數(shù)1，參數(shù)2)；讓元素在X軸與Y軸放大或縮小多少倍-->參數(shù)1：X；參數(shù)2：Y

　　skew(參數(shù)1，參數(shù)2)；skew(30deg,20deg)-->圍繞 X 軸把元素翻轉(zhuǎn) 30 度，圍繞 Y 軸翻轉(zhuǎn) 20 度

transition:過(guò)渡效果

　　transition: all 1s linear 3s;

　　*過(guò)渡效果

1 2 3 4

<em?id="__mceDel">　　參數(shù)1：用來(lái)指定對(duì)那些屬性使用過(guò)渡效果　　參數(shù)2：過(guò)渡效果的持續(xù)時(shí)間　　參數(shù)3：過(guò)渡效果的顯示速度變化　　參數(shù)4：用來(lái)指定過(guò)渡效果的延遲時(shí)間*/</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; ????????????/*過(guò)渡效果 ???????????????參數(shù)1：用來(lái)指定對(duì)那些屬性使用過(guò)渡效果 ???????????????參數(shù)2：過(guò)渡效果的持續(xù)時(shí)間 ???????????????參數(shù)3：過(guò)渡效果的顯示速度變化 ???????????????參數(shù)4：用來(lái)指定過(guò)渡效果的延遲時(shí)間*/ ????????????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軸發(fā)生偏移參數(shù)1：X軸方向偏移? 參數(shù)2：Y軸方向偏移 ??????????????translatex:讓元素在X軸方向發(fā)生偏移 ??????????????translatey:讓元素在Y軸方向發(fā)生偏移*/ ????????????/*transform: translate(50px,0);*/ ????????????/*scale:讓元素在X軸和Y軸都發(fā)生縮放? 參數(shù)1：X軸方向的方法倍數(shù) 參數(shù)2：Y軸方向的放大倍數(shù) ??????????????scaleX：讓元素在X軸方向發(fā)生縮放 ??????????????scaleY：讓元素在Y軸方向發(fā)生縮放*/ ????????????transform: scaleX(1.5); ????????????/*rotate：讓你的元素按照指定的中心點(diǎn)進(jìn)行旋轉(zhuǎn) ????????????????rotateX:讓元素沿著X軸旋轉(zhuǎn) ????????????????rotateY：讓元素沿著Y軸旋轉(zhuǎn) ????????????*/ ????????????/*transform: rotateY(180deg);*/ ????????????/*transform: skewY(-90deg);*/ ????????????/*transform-origin:用來(lái)設(shè)置旋轉(zhuǎn)的中心點(diǎn)*/ ????????????/*transform-origin: left;*/ ????????} ????</style> ????<title>變形效果</title> </head> <body> <div?id="div1"> </div> </body> </html>

轉(zhuǎn)載于:https://www.cnblogs.com/gfl123/p/7881651.html

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的01.CSS动画--transform的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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