CSS3中translate，transform和translation的区别和联系 CSS3中translate，transform和trans...
CSS3\u4e2dtranslate\uff0ctransform\u548ctranslation\u7684\u533a\u522b\u548c\u8054\u7cfb\u66f4\u6b63\u4e2a\u9519\u8bef\uff1a\u6ca1\u6709translation\uff0c\u53ef\u80fd\u4f60\u60f3\u8bf4\u7684transition\u3002translate\uff1a\u4f4d\u79fb\uff0c\u79fb\u52a8\u6bd4\u5982-webkit-transform:translate(20px,30px);\u5c06\u5143\u7d20\u6cbfx\u79fb\u52a820px\uff0c\u6cbfy\u79fb\u52a830pxtransform\uff1a\u53d8\u5f62\uff0c\u6539\u53d8\u5143\u7d20\u7684\u4f4d\u7f6e\uff0c\u5f62\u72b6\u6539\u53d8\u90fd\u8981\u5148\u7528\u5230\u5b83\uff0c\u6bd4\u5982\u4e0a\u9762translate\uff0c\u8fd8\u6709scale\uff0cskew-webkit-transform:scale(2);-webkit-transform:skew(20deg,20deg)transition\uff1a\u8fc7\u6e21\u4e3b\u8981\u662f\u7528\u5728css3\u4e2d\u8fc7\u6e21\u5f62\u72b6\u3001\u989c\u8272\u3001\u4f4d\u7f6e\u7b49\u3002\u6bd4\u5982\uff1a-webkit-transition:width 0.2s;/*\u5143\u7d20\u7684\u5bbd\u5ea6\u53d1\u751f\u6539\u53d8\u65f6\uff0c\u4f1a\u6709\u4e2a\u8fc7\u6e21\u7684\u52a8\u753b*/CSS3\u4e2dtranslate\uff0ctransform\u548ctranslation\u7684\u533a\u522b\u548c\u8054\u7cfb
\u66f4\u6b63\u4e2a\u9519\u8bef\uff1a\u6ca1\u6709translation\uff0c\u53ef\u80fd\u4f60\u60f3\u8bf4\u7684transition\u3002
translate\uff1a\u4f4d\u79fb\uff0c\u79fb\u52a8
\u6bd4\u5982-webkit-transform:translate(20px,30px);\u5c06\u5143\u7d20\u6cbfx\u79fb\u52a820px\uff0c\u6cbfy\u79fb\u52a830px
transform\uff1a\u53d8\u5f62\uff0c\u6539\u53d8
\u5143\u7d20\u7684\u4f4d\u7f6e\uff0c\u5f62\u72b6\u6539\u53d8\u90fd\u8981\u5148\u7528\u5230\u5b83\uff0c\u6bd4\u5982\u4e0a\u9762translate\uff0c\u8fd8\u6709scale\uff0cskew
-webkit-transform:scale(2);-webkit-transform:skew(20deg,20deg)
transition\uff1a\u8fc7\u6e21
\u4e3b\u8981\u662f\u7528\u5728css3\u4e2d\u8fc7\u6e21\u5f62\u72b6\u3001\u989c\u8272\u3001\u4f4d\u7f6e\u7b49\u3002\u6bd4\u5982\uff1a
-webkit-transition:width 0.2s;/*\u5143\u7d20\u7684\u5bbd\u5ea6\u53d1\u751f\u6539\u53d8\u65f6\uff0c\u4f1a\u6709\u4e2a\u8fc7\u6e21\u7684\u52a8\u753b*/
translate 同其他属性rotate/skew/scale等，构成css中变形的几种方式。translate(x, y) 是将dom元素，在原来的基础上，偏移一定距离。translate需要跟transform结合使用。
transform css中的变形属性
transition 是制作居间动画的一种方式，可以指定“渐变”的css属性，如width，height，top，left，opacity，transform等。还可以指定渐变动画的duration（持续时间），delay（推迟时间），渐变函数（ease、ease-in/out、cubic-bezier等）。
举例说明：
将元素向下偏移20像素，向右偏移20像素 transform: translate(20px, 20px);
当对元素应用变形（transform）属性时，延迟一秒后开始动画，动画速度开始慢，然后加速，最后慢慢结束，动画持续300毫秒 transition: transform 300ms ease 1s; 此时如果你对元素应用transform: translate(20px, 20px);时，一秒钟后，dom元素会逐渐往右下方向移动，直到距离原来下方20像素，右方20像素的位置后停止，动画持续300毫秒。
绛旓細鍦–SS3涓紝translate鏄竴绉嶇敤浜庡厓绱犲彉鎹㈢殑CSS灞炴э紝瀹冨彲浠ユ敼鍙樺厓绱犵殑浣嶇疆锛屼笉褰卞搷鍏跺湪鏂囨。娴佷腑鐨勪綅缃倀ranslate灞炴у彲浠ュ簲鐢ㄤ簬2D鍜3D鍙樻崲銆傚湪CSS3涓紝translate灞炴х敤浜庡鍏冪礌杩涜骞崇Щ鍙樻崲锛屾敼鍙樺厓绱犲湪姘村钩鍜屽瀭鐩存柟鍚戜笂鐨勪綅缃紝鑰屼笉褰卞搷鍏跺湪鏂囨。娴佷腑鐨勪綅缃倀ranslate灞炴у彲浠ュ簲鐢ㄤ簬2D鍜3D鍙樻崲銆備互涓嬫槸translat...
绛旓細鏀瑰彉 CSS3涓涓昏鍖呮嫭鏃嬭浆; -webkit-transform锛 鐢ㄦ硶transform,銆佸け鍘荤劍鐐圭瓑 transition,100px): translate(50px: bottom left, translate,20deg) 缂╂斁锛歵ransition; -o-transform.x锛屼唬琛ㄦ部x杞村拰y杞村钩绉荤殑璺濈 鎵鏈夌殑2D杞崲鏂规硶缁勫悎鍦ㄤ竴璧:CSS鐨勫睘鎬.y 锛宼ransform鐨勪竴涓柟娉 閫氳繃 translate() 鏂规硶...
绛旓細CSS3涓璽ranslate锛transform鍜宼ranslation鐨勫尯鍒拰鑱旂郴濡備笅锛歵ranslate:绉诲姩锛宼ransform鐨勪竴涓柟娉曪紝閫氳繃 translate() 鏂规硶锛屽厓绱犱粠鍏跺綋鍓嶄綅缃Щ鍔紝鏍规嵁缁欏畾鐨 left锛坸 鍧愭爣锛 鍜 top锛坹 鍧愭爣锛 浣嶇疆鍙傛暟銆倀ransform:鍙樺舰銆傛敼鍙 CSS3涓富瑕佸寘鎷 鏃嬭浆锛歳otate() 椤烘椂閽堟棆杞粰瀹氱殑瑙掑害锛屽厑璁歌礋鍊 rotate(30deg...
绛旓細translate:绉诲姩锛宼ransform鐨勪竴涓柟娉曪紝閫氳繃 translate() 鏂规硶锛屽厓绱犱粠鍏跺綋鍓嶄綅缃Щ鍔紝鏍规嵁缁欏畾鐨 left锛坸 鍧愭爣锛 鍜 top锛坹 鍧愭爣锛 浣嶇疆鍙傛暟銆倀ransform:鍙樺舰銆傛敼鍙 CSS3涓涓昏鍖呮嫭 鏃嬭浆锛歳otate() 椤烘椂閽堟棆杞粰瀹氱殑瑙掑害锛屽厑璁歌礋鍊 rotate(30deg)銆倀ransition: 鍏佽CSS灞炴у煎湪涓瀹氱殑鏃堕棿鍖洪棿鍐呭钩婊戠殑杩...
绛旓細transform锛氬彉褰紝鏀瑰彉 鍏冪礌鐨勪綅缃紝褰㈢姸鏀瑰彉閮借鍏堢敤鍒板畠锛屾瘮濡備笂闈translate锛杩樻湁scale锛宻kew -webkit-transform:scale(2);-webkit-transform:skew(20deg,20deg)transition锛氳繃娓 涓昏鏄敤鍦╟ss3涓杩囨浮褰㈢姸銆侀鑹层佷綅缃瓑銆傛瘮濡傦細-webkit-transition:width 0.2s;/*鍏冪礌鐨勫搴﹀彂鐢熸敼鍙樻椂锛屼細鏈変釜杩囨浮鐨...
绛旓細translate 鍚屽叾浠栧睘鎬otate/skew/scale绛夛紝鏋勬垚css涓彉褰㈢殑鍑犵鏂瑰紡銆倀ranslate(x, y) 鏄皢dom鍏冪礌锛屽湪鍘熸潵鐨勫熀纭涓婏紝鍋忕Щ涓瀹氳窛绂汇倀ranslate闇瑕佽窡transform缁撳悎浣跨敤銆倀ransform css涓殑鍙樺舰灞炴 transition 鏄埗浣滃眳闂村姩鐢荤殑涓绉嶆柟寮忥紝鍙互鎸囧畾鈥滄笎鍙樷濈殑css灞炴э紝濡倃idth锛宧eight锛宼op锛宭eft锛宱pacity锛...
绛旓細transition-delay:.18s; //鎸囧畾寮濮嬪嚭鐜扮殑寤惰繜鏃堕棿 } div:hover { width: 400px;height:400px;} 7锛孠eyframes琚О涓哄叧閿抚锛宑ss3涓浠モ淍keyframes鈥濆紑澶达紝鍚庨潰绱ц窡鐫鏄姩鐢诲悕绉板姞涓婁竴瀵硅姳鎷彿鈥渰...}鈥漦eyframes changecolor{ 0%{ background: red;} 20%{ background:blue;} 40%{ back...
绛旓細涓嬮潰瑕佺敤鍒版棆杞紝rotate锛屼笉鎳傜殑璇濓紝璇风偣鍑烩啋 css3绯诲垪涔媡ransform 璇﹁Вrotate 棣栧厛Z 杞存槸鏈濆悜鎴戜滑鐨勶紝鎵浠 鐪嬩笉鍑烘晥鏋滐紝浣嗘槸锛屾垜浠妸瀹冭浆涓韩锛岃Z杞 闈㈠ 鍙宠竟锛屽氨鍙互浜嗐translate() 鍜 translate3d()translate 鏄悓鏃惰缃 translateX 鍜 translateY锛 鎵浠ラ噷闈㈠彲浠ュ～涓や釜鍙傛暟锛 绗竴涓...
绛旓細transform鐨勫惈涔夋槸锛氭敼鍙橈紝浣库﹀彉褰紱杞崲 CSS3 transform閮芥湁鍝簺甯哥敤灞炴э紵transform鐨勫睘鎬у寘鎷細rotate()/ skew()/ scale()/ translate(,)锛屽垎鍒繕鏈墄銆亂涔嬪垎锛屾瘮濡傦細rotatex()鍜 rotatey()锛屼互姝ょ被鎺ㄣ備笅闈㈡垜浠潵鍒嗚В鍚勪釜灞炴х殑鐢ㄦ硶锛歵ransform:rotate()锛氬惈涔夛細鏃嬭浆锛涘叾涓渄eg鈥濇槸鈥滃害鈥濈殑鎰忔...
绛旓細css3 缈昏浆鍜屾棆杞殑鍖哄埆濡備笅锛氭杩帮細css3涓鐨則ransform涓湁鏃嬭浆锛屾斁缂╋紝鍊炬枩锛屽钩绉荤殑鍔熻兘锛屽垎鍒搴旂殑灞炴ф槸锛歳otate锛宻cale锛宻kew锛translate 1銆佹棆杞紝鍒╃敤rotate鏉ュ疄鐜帮紝浠ｇ爜濡備笅锛-webkit-transform:rotate(10deg); 鎸囧畾娴忚鍣ㄥ唴鏍镐负webkit鐨勭炕杞柟寮 -moz-transform:rotate(10deg);鎸囧畾firefox娴忚鍣ㄧ鏈...
