translate

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2022å¹´8æ.

è©¦ãã¦ã¿ã¾ããã

translate: none;

translate: 40px;

translate: 50% -40%;

translate: 20px 4rem;

translate: 20px 4rem 150px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

æ§æ

css

/* ãã¼ã¯ã¼ãå¤ */
translate: none;

/* åä¸ã®å¤ */
translate: 100px;
translate: 50%;

/* äºã¤ã®å¤ */
translate: 100px 200px;
translate: 50% 105px;

/* ä¸ã¤ã®å¤ */
translate: 50% 105px 5rem;

/* ã°ãã¼ãã«å¤ */
translate: inherit;
translate: initial;
translate: revert;
translate: revert-layer;
translate: unset;

å¤

åä¸ã® <length-percentage> å¤: åä¸ã® <length> ã¾ãã¯ <percentage> å¤ã§ã X è»¸æ¹åã®å¹³è¡ç§»åãæå®ãã¾ãã translate() ï¼2D ã®å¹³è¡ç§»åï¼é¢æ°ã«åä¸ã®å¤ãæå®ãããã®ã¨åçã§ãã
2 ã¤ã® <length-percentage> å¤: 2 ã¤ã® <length> ã¾ãã¯ <percentage> å¤ã§ã 2D ã®å¹³è¡ç§»åã«ããã X ããã³ Y è»¸æ¹åã®ç§»åéã (ãããã) æå®ãã¾ãã translate() ï¼2D ã®å¹³è¡ç§»åï¼é¢æ°ã« 2 ã¤ã®å¤ãæå®ãããã®ã¨åçã§ãã
3 ã¤ã®å¤: 2 ã¤ã® <length-percentage> å¤ã¨ 1 ã¤ã® <length> å¤ã§ã 3D ã®å¹³è¡ç§»åã«ããã X, Y, Z è»¸ã®ç§»åéãï¼ããããï¼æå®ãã¾ãã translate3d() ï¼3D ã®å¹³è¡ç§»åï¼é¢æ°ã¨åçã§ãã
none: å¹³è¡ç§»åãé©ç¨ãããªããã¨ãæå®ãã¾ãã

å¬å¼å®ç¾©

åæå¤	`none`
é©ç¨å¯¾è±¡	åº§æ¨å¤æå¯è½è¦ç´
ç¶æ¿	ãªã
ãã¼ã»ã³ãå¤	å²ã¿ããã¯ã¹ã®å¯¸æ³ã«å¯¾ããç¸å¯¾å¤
è¨ç®å¤	æå®éãããã ãç¸å¯¾çãªé·ãã¯ã¯çµ¶å¯¾çãªé·ãã«å¤æããã
ã¢ãã¡ã¼ã·ã§ã³ã®ç¨®é¡	åº§æ¨å¤æ
éãåããã³ã³ããã¹ãã®çæ	ãã

å½¢å¼ææ³

translate = 
  none                                                |
  <length-percentage> [ <length-percentage> <length>? ]?  

<length-percentage> = 
  <length>      |
  <percentage>

ä¾

ããã¼æã«è¦ç´ ãç§»å

HTML

html

<div class="wrapper">
  <div id="box1">translate X</div>
  <div id="box2">translate X,Y</div>
  <div id="box3">translate X,Y,Z</div>
</div>

CSS

css

.wrapper {
  perspective: 100px;
  display: inline-flex;
  gap: 1em;
}
.wrapper > div {
  width: 7em;
  line-height: 7em;
  text-align: center;
  transition: 0.5s ease-in-out;
  border: 3px dotted;
}
#box1:hover {
  translate: 20px;
}

#box2:hover {
  translate: 20px 20px;
}

#box3:hover {
  translate: 5px 5px 30px;
}