What Does -Webkit-Transform: Translate3D(0,0,0); Exactly Do? Apply to Body

Repeatedly setting translate3d(10px,0,0) is not moving div to the right repeatedly. How to make it work?

When you are doing div.style.transform = 'translate3d(10px, 0, 0)'; you are just removing the transform value to replace it by another, so your element will keep the same position. If you want to move your element using translate3d, you can use a variable and increment it every click :

var div = document.createElement('div');div.style.width = '100px';div.style.height = '100px';div.style.background = 'red';div.style.position = 'absolute';document.body.appendChild(div);
var leftValue = 0;var increment = 10;
var button = document.querySelector('button');
button.addEventListener('click', function(event) {  leftValue += increment;  div.style.transform = 'translate3d('+leftValue+'px,0,0)';})

<button>Move</button>

Unwanted whitespace created by CSS transition animation

Not related to css animation, one thing you could do to fix this, is to add overfrlow-x: hidden; to your body.

body{
    overflow-x: hidden;
}

CSS 3d transform doesn't work if perspective is set in the end of property

You should make the perspective first in both cases. If you add it at the end the translation will be first made without considering the perspective.

If we refer to the specification we can see how the transformation matrix is computed:

The transformation matrix is computed from the transform and
transform-origin properties as follows:

Start with the identity matrix.

Translate by the computed X and Y of transform-origin

Multiply by each of the transform functions in transform property from
left to right

Translate by the negated computed X and Y values of transform-origin

As you can see in the step (3), it's from left to right (here is another question where you can get more information and see why order is important: Simulating transform-origin using translate)

It also useless to use the perspective property within the element you want to transform.

box:nth-child(1):hover {  transform: perspective(1000px) translate3d(0, 0, -100px);}
box:nth-child(2):hover {  transform: perspective(1000px) translate3d(0, 0, 100px);}
box {  padding: 20px;  display: inline-flex;  align-items: center;  justify-content: center;  font-family: monospace;  transition: transform .4s;  background: rgba(255, 0, 0, 0.3);  margin: 20px;  /*perspective: 1000px;*/  font-size: 12px;  cursor: pointer;}
box:nth-child(2) {  background: rgba(0, 0, 255, 0.3);}

<box>  transform: perspective(1000px) translate3d(0,0,100px);</box><box>  transform:  perspective(1000px) translate3d(0,0,100px);</box>

Zooming on a point with CSS3 transform scale

One thing to watch out for when using transforms is the order that you apply them. You'll find your example works rather differently if you switch the scale and the translate around.

Here is an interesting article on the matter:

https://staff.washington.edu/fmf/2011/07/15/css3-transform-attribute-order/

I wasn't able to repair your version, mainly because it misbehaves unexpectedly when you switch the order of the transforms. Basically it seems you are running into odd behaviour because the scale itself causes an automatic translation in position, and then you also translate... and it seems these different translations are occurring at a slightly different pace.

I did however re-implement a version that works, and allows you to translate before scaling. Keeping the transforms in this order seems to avoid the issue.

http://jsfiddle.net/fxpc5rao/32/

I've modified the version below to use translate3D just because it performs better for many systems.

var current = {x: 0, y: 0, zoom: 1},    con = document.getElementById('container');    window.onclick = function(e) {    var coef = e.shiftKey || e.ctrlKey ? 0.5 : 2,        oz = current.zoom,        nz = current.zoom * coef,        /// offset of container        ox = 20,        oy = 20,        /// mouse cords        mx = e.clientX - ox,        my = e.clientY - oy,        /// calculate click at current zoom        ix = (mx - current.x) / oz,        iy = (my - current.y) / oz,        /// calculate click at new zoom        nx = ix * nz,        ny = iy * nz,        /// move to the difference        /// make sure we take mouse pointer offset into account!        cx = mx - nx,        cy = my - ny    ;    // update current    current.zoom = nz;    current.x = cx;    current.y = cy;    /// make sure we translate before scale!    con.style.transform        = 'translate3D('+cx+'px, '+cy+'px,0) '        + 'scale('+nz+')'    ;};

#container {    position: absolute;    left: 20px;    top: 20px;    width: 100%;    height: 100%;    transform-origin: 0 0 0;    transition: transform 0.3s;    transition-timing-function: ease-in-out;    transform: translate3D(0,0,0) scale(1);}
#item {    position: absolute;}

<div id="container">    <div id="item">        <img src="http://fadili.users.greyc.fr/demos/WaveRestore/EMInpaint/parrot_original.png" />    </div></div>

Why is there a border around modal box header?

You have some invalid / unnecessary properties set leaving it to interpretation by the browsers which could render different accordingly like for example border-radius would be 0 instead of with px, inset wouldn't apply to a fixed position element, and a hex color is only 6 digits (if you want an alpha channel for opacity go with rgba instead) etc.

Anyway, made some edits to your example, you should no longer see the issue, hope it helps. Cheers!

.header {
  background-color: #FFBF76;
  text-align: center;
  margin: -1px; /* ensure no resize space */
}
.modal {
  border: 3px solid #FFBF76;
  background: #FFF1BD;
}
.modalBackground {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000066;
}

<div class="modalBackground">
  <div class="modal">
    <div class="header">
      My Header
    </div>
    <div>
    some content
    </div>
  </div>
</div>
<!-- <asd></asd> = not a valid element -->

What can I use to replace translate3d

Transforms establish a containing block even for fixed elements. There is no workaround. Either don't use transforms or fixed positioning becomes somewhat useless.

In this case, if you are only using translate3d to translate in X direction, you can just use relative positioning with a left offset.

.nav-content {
  position: relative;
  left: 0;
  transition: left .3s;
}
.nav-content.isOpen {
  left: 220px;
}

.nav-content {  position: relative;  left: 0;  transition: left .3s;  height: 200vh;  border: 3px solid blue;}:checked ~ .nav-content {  left: 220px;}.fixed {  position: fixed;}

<input type="checkbox" id="toggle" /><label for="toggle">Toggle</label><div class="nav-content">  <div class="fixed">I am fixed</div></div>