Is there something like "backdrop-transform" in CSS? Or some way to transform different regions of the same image/video/iframe/etc. independently?

Question

In CSS we have transform and filter, and we also have backdrop-filter. But as far as I can see, we don't have backdrop-transform, or anything like it.

To explain what I mean: backdrop-filter allows you to filter things that are behind the some particular element, so for example you could adjust the hue of a particular region of your background image by positioning a div over that region, and then applying backdrop-filter: hue-rotate(90deg) to it, like this:

So backdrop-transform is the analogue of this for the transform property. You could transform part of a background image, like this:

You could also do something like this with a single embedded youtube video (or any other iframe), for example:

Note that if you tried to use two separate iframes to simulate this, you'd need to somehow keep then in sync with one another (with regard to scrolling, video playback, etc.), which may be hard/impossible if the iframe is cross-domain. This is not to mention the costs of embedding a new iframe/video for every segment that you want to transform.

Maybe I'm too drunk on the amazing promises of Houdini, but I think something like this would be really powerful and very useful (for me, at least!). For example, you could embed a video element, but break it up into quarters, and even jumble those quarters around using CSS! Doing it with 4 different masked videos would be tedious and trying to keep them perfectly in sync frame-by-frame might be troublesome (esp. given the low time resolution of the HTML5 video API), and cutting the video up on the server-side just seems unnecessarily arduous.

For my particular use case, I don't even have control over the video (it's in a cross-domain iframe), so CSS is the only way to achieve what I'd like to do. backdrop-filter gets me half-way there, but I also need to be able to transform the segments a bit, independently.

---

Possible Solution #1: element()

The CSS element(...) can be used anywhere that the url(..) function can. It allows you to use a full snapshot (including cross-domain content) of any element on the page as an image (mind-blowing). Here's a good into with some demos for those interested. The only problem is that it's only currently supported by Firefox, but it is on a standards track, so it's quite possible that it may be supported by other browsers in the future. If we ever get a cross-browser version of the element() function, we could achieve everything that is possible with the hypothetical backdrop-transform property. We'd just position a div over the region, then get a live snapshot of it, and transform it as you wish. Performance could be a problem, depending on how element() is implemented behind the scenes. Here is the chromium issue for element().

Answer 1

You can create this by you own combining different features. Basically you use two elements where inside one you remove a part that you recreate with another element then you can easily apply any kind of transformation.

Here is a basic idea with a fake transparency:

.box {
  width:300px;
  height:200px;
  margin:50px;
  background:
    /*I hide a part of the image using a white gradient*/
    linear-gradient(#fff,#fff) 50px 50px/100px 100px,
    /*the main image*/
    url(https://picsum.photos/300/200?image=1069);
  background-repeat:no-repeat;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  box-sizing:border-box;
  /*I get the same background*/
  background:inherit;
  /*I make the gradient with 0 size*/
  background-size:0 0,auto;
  /*I clip the background to only the content*/
  background-clip:content-box;
  padding:50px 150px 50px 50px;
  /*Apply what you want here*/
  transform:perspective(100px) rotateY(-20deg) skewX(10deg);
}

<div class="box">

</div>

The main trick is to have the same background for both and rely on clipping and gradient to simulate the needed effect.

Instead of clipping you can also adjust the background size/position:

.box {
  width:300px;
  height:200px;
  margin:50px;
  background:
    /*I hide a part of the image using a white gradient*/
    linear-gradient(#fff,#fff) 50px 50px/100px 100px,
    /*the main image*/
    url(https://picsum.photos/300/200?image=1069);
  background-repeat:no-repeat;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:50px;
  left:50px;
  width:100px;
  height:100px;
  background:inherit;
  background-size:0 0,300px 200px;
  background-position:-50px -50px;
  /*Apply what you want here*/
  transform:perspective(100px) rotateY(-20deg) skewX(15deg);
  transform-origin:right;
}

<div class="box">

</div>

---

Another idea is to use clip-path to have a perfect transparency but it can be a bit tricky to find the different values:

.container {
  display:inline-block;
  position:relative;
  margin:50px;
}

.box {
  width:300px;
  height:200px;
  background:
    url(https://picsum.photos/300/200?image=1069);
  background-repeat:no-repeat;
clip-path: polygon(0% 0%, 0% 100%, 
  50px 100%, 50px 50px, 150px 50px, 150px 150px, 50px 150px, 50px 100%, 100% 100%, 100% 0%);
}
.container:before {
  content:"";
  position:absolute;
  top:50px;
  left:50px;
  width:100px;
  height:100px;
  box-sizing:border-box;
  background:
    url(https://picsum.photos/300/200?image=1069) -50px -50px/300px 200px no-repeat;

  /*Apply what you want here*/
  transform:perspective(100px) rotateY(-20deg) scale(0.8);
}

body {
  background:linear-gradient(to right,pink,red);
}

<div class="container">
<div class="box">

</div>
</div>

And to make it easier to handle you can consider CSS variable to easily adjust the region you want to target:

.container {
  display:inline-block;
  position:relative;
  z-index:0;
  margin:5px;
  /*we set background here for inheritance*/
  background-image:var(--img);
  background-size:0 0; /*don't show here*/
  width:200px;
  height:200px;
}

.container:before,
.container:after{
  content:"";
  position:absolute;
  background-image:inherit;
}
.container:before {
  top:0;
  left:0;
  right:0;
  bottom:0;
  clip-path: polygon(0% 0%, 0% 100%, 
  var(--l) 100%, var(--l) var(--t), calc(var(--l) + var(--w)) var(--t), calc(var(--l) + var(--w)) calc(var(--t) + var(--h)), var(--l) calc(var(--t) + var(--h)), var(--l) 100%, 100% 100%, 100% 0%);
}
.container:after {
  top:var(--t);
  left:var(--l);
  width:var(--w);
  height:var(--h);
  background-position:calc(-1*var(--l)) calc(-1*var(--t));
  transform:var(--transform,none);
}

body {
  background:linear-gradient(to right,pink,red);
}

<div class="container"
  style="--img:url(https://picsum.photos/200/200?image=1069);
         --t:50px;--l:50px;
         --w:100px;--h:100px;
         --transform:perspective(100px) rotateY(-20deg) scale(0.8)">
</div>

<div class="container"
  style="--img:url(https://picsum.photos/200/200?image=1052);
         --t:10px;--l:50px;
         --w:100px;--h:150px;
         --transform:perspective(100px) rotate(-20deg) scale(0.8)">
</div>
<div class="container"
  style="--img:url(https://picsum.photos/200/200?image=1055);
         --t:5px;--l:5px;
         --w:80px;--h:80px;
         --transform:perspective(100px) skew(25deg) scale(0.8)">
</div>
<div class="container"
  style="--img:url(https://picsum.photos/200/200?image=1049);
         --t:100px;--l:100px;
         --w:100px;--h:100px;
         --transform:translate(50px,50px)">
</div>

As you can see, the code is reduced to only one container where you can easily set the image, the top/left position of the region and its width/height then the transformation you need to apply.