translateY()

åºçº¿ å¹¿æ³å¯ç¨

translateY() å¨é¡µé¢åç´ç§»å¨åç´ ï¼ç»ææ¯ CSS æ°æ®ç±»å <transform-function>ã

å°è¯ä¸ä¸

transform: translateY(0);

transform: translateY(42px);

transform: translateY(-2.1rem);

transform: translateY(3ch);

<section id="default-example">
  <img
    class="transition-all"
    id="static-element"
    src="/proxy/developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
  <img
    class="transition-all"
    id="example-element"
    src="/proxy/developer.mozilla.org/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

#static-element {
  opacity: 0.4;
  position: absolute;
}

#example-element {
  position: absolute;
}

å¤æ³¨ï¼translateY(ty) å¯¹åº translate(0, ty) ætranslate3d(0, ty, 0)ã

è¯æ³

css

/* <length-percentage> values */
transform: translateY(200px);
transform: translateY(50%);

å¼

<length> æ <percentage>: è¡¨ç¤ºåæ¢åéççºµåæ ãç¾åæ¯æçæ¯çåé«åº¦ï¼çåç±å±æ§ transform-box å®ä¹ã

ç¬å¡å°åæ â²	å¨ââ²ä¸çåç±»åæ	å¨â³ä¸çç¬å¡å°åæ	å¨ââ³åç±»åæ
å¨â²ä¸çè½¬æ¢ä¸ä¼æ¯çº¿æ§åæ¢ä½æ¯å¹¶ä¸è½ä»£è¡¨å¨ç¬å¡å°åæ ç³»ç»ä¸ä½¿ç¨ç©éµ	$(\begin{matrix} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \\ 0 & 1 & t \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & t \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
	`[1 0 0 1 0 t]`

å½¢å¼è¯æ³

translateY(<length-percentage>)

ç¤ºä¾

HTML

html

<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

css

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateY(10px);
  background-color: pink;
}

ç»æ

è§è

è§è
CSS Transforms Module Level 1 # funcdef-transform-translatey

æµè§å¨å¼å®¹æ§

åè§

å¸®å©æ¹è¿ MDN

äºè§£å¦ä½åä¸è´¡ç®

å¨ GitHub ä¸æ¥çæ¤é¡µé¢ â¢ æ¥åæ¤åå®¹çé®é¢

translateY()

å¸®å©æ¹è¿ MDN

å¸®å©æ¹è¿ MDN