Translate() CSS function of the transform property

The translate() CSS function is used to reposition an element to the top, bottom, right, left, front and back directions. The value can be in px, in, cm, em, %, etc., okay. However, the translateZ() doesn't support the value in percentage (%).

The translateX() CSS function moves an element horizontally to the left or right direction. The negative value will shift the element toward the left direction and the positive value will shift the element toward the right direction. TranslateX() examples which are all same: translateX(30px) = translate(30px) = translate(30px, 0) = translate3d(30px, 0, 0)

TranslateY(): The translateY() CSS function moves an element vertically to the bottom or top direction. The negative value will shift the element toward the top direction and the positive value will shift the element toward the bottom direction. TranslateY() examples which are all same: translateY(80px) = translate(0, 80px) = translate3d(0, 80px, 0)

Translate(x, y): We can write the translate X & Y at a time. Translate(x, y) examples which are all same: translate(1cm, -80%) = translateX(1cm) translateY(-80%) = translate(1cm) translateY(-80%) = translate3d(1cm, -80%, 0)

TranslateZ(): The translateZ() CSS function moves an element to the front or back direction in a 3D view. The negative value will shift the element toward the back direction and the positive value will shift the element toward the front direction. TranslateZ() examples which are all same: translateZ(1.2in) = translate3d(0, 0, 1.2in)

Translate3d(x, y, z): The translate3d() CSS function moves an element along the X, Y & Z axes in a 3D space. It is just like a shorthand method of writing all the translate X, Y & Z together. To make the object move closer or further, we can link the perspective() function with the translate Z. Make sure the perspective() function is written before the translate() function. The negative Z value will push the object further. The positive Z value will make the object come closer. As we learned at the beginning, the x value will move the element to the right or left direction and the y value will move the element to the bottom or top direction.

Translate3d(x, y, z) examples, which are all same: translate3d(50px, -5ch, 50em) = translateX(50px) translateY(-5ch) translateZ(50em) = translate(50px) translateY(-5ch) translateZ(50em) = translate(50px, -5ch) translateZ(50em)

<!DOCTYPE html>
<html>
<head>
   <style>

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  position: relative;
  margin: 0;
  min-height: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  box-sizing: inherit;
}

  .threeD {
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-10deg)
  perspective(40in) translate3d(50px, 3ch, 50em);
}

.area {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.8;
  color: white;
  font-size: 10em;
  display: grid;
  align-items: center;
  text-align: center;
  border: solid 20px #2effea;
  }

.front {
  transform: translate3d(0, 0, 1.2in);
  background: #ff2ed9;
}

.back {
  transform:  translateZ(-120px) rotateY(180deg);
  background: #c02eff;
}

.left {
  right: 80px;
  transform: rotateY(270deg);
  background: #f5ff2e;
}

.right {
  left: 120px;
  transform: rotateY(90deg);
  background: #ffab2e;
}

.top {
  bottom: 80px;
  transform: rotateX(90deg);
  background: blue;
}

.bottom {
  top: 120px;
  transform:  rotateZ(180deg) rotateX(90deg);
  background: #34eb7d;
}

  </style>
</head>

<body>
<div class="threeD"> 
<div class="area front">1</div>  
<div class="area back">2</div>
<div class="area left">3</div> 
<div class="area right">4</div> 
<div class="area top">5</div>
<div class="area bottom">6</div>  
</div>
</body>

</html>