When inserting an element with an image as shape-outside mask and translating the position, the mask is not translating, so the mask is not working properly.
The same is happening if transforming a container around. I tried different things but so far no influence to keep the mask matching the image.
Here is an example: https://codepen.io/honk007/pen/oNpbRaG
Here you can see the wrong position of the mask:
<div class="container">
<img class="image" alt="" width="400" height="335" src="https://i.ibb.co/5LJkydd/transparent.png" >
</div>
.image {
float: right;
shape-outside: url(https://i.ibb.co/5LJkydd/transparent.png);
transform: translateX(200px);
}
.container {
display: flow-root;
box-sizing: content-box;
max-width: 900px;
}
U can use margin to shift your picture instead of transform. You can't use transform for this because a transform will not influence the position of other elements.