Animation and Video with detached

The detached transform style can be applied in conjunction with transform animations. The detached transform can also be applied to <video> elements.

This is provided as a developer preview and is subject to change.

Examples

Animation

CSS:

.animationDetached {
  transform-style: detached;
  transform: translate3d(-50px, 0px, 200px);
  animation: myanimation 2s infinite linear;
}

@keyframes myanimation {
  0%   {transform:translate3d(0px, 0px, 200px) rotate3d(0,1,0,0deg);}
  50%  {transform:translate3d(0px, 0px, 25px)  rotate3d(0,1,0,0deg);}
  100% {transform:translate3d(0px, 0px, 25px)  rotate3d(0,1,0,60deg);}
}

The CSS renders as below:

Video

HTML And CSS:

.videoDetached {
    transform-style: detached;
    transform: translate3d(-50px, 0, +50px);
}

<video src='big_buck_bunny.mp4' class='videoDetached'></video>

The CSS renders as below:

Note: User interaction on the detached video is disabled.