translateY()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2015å¹´7æ.
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) ã¨ç価ã§ãã
æ§æ
/* <length-percentage> å¤ */
transform: translateY(200px);
transform: translateY(50%);
å¤
<length-percentage>-
å¤æãã¯ãã«ã®ç¸¦åº§æ¨ã表ã
<length>ã¾ãã¯<percentage>ã§ããç´äº¤åº§æ¨ç³»ã§ã¯ Y 座æ¨ã®ç§»åéã表ãã¾ãããã¼ã»ã³ãå¤ã¯transform-boxããããã£ã§å®ç¾©ãããåç §ããã¯ã¹ã®å¹ ããã®ç¸å¯¾å¤ã§ãã
| ç´äº¤åº§æ¨ç³» (â^2) | å次座æ¨ç³» (ââ^2) | ç´äº¤åº§æ¨ç³» (â^3) | å次座æ¨ç³» (ââ^3) |
|---|---|---|---|
|
å¹³è¡ç§»å㯠â^2 ã®ç·å½¢å¤æã§ã¯ãªãã®ã§ãç´äº¤åº§æ¨è¡åã使ç¨ãã¦è¡¨ããã¨ã¯ã§ãã¾ããã |
|
|
|
[1 0 0 1 0 t] |
å½¢å¼ææ³
<translateY()> =
translateY( <length-percentage> )
<length-percentage> =
<length> |
<percentage>
ä¾
HTML
<div>éç</div>
<div class="moved">移å</div>
<div>éç</div>
CSS
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: translateY(10px);
background-color: pink;
}
çµæ
ä»æ§æ¸
| Specification |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-translatey |