How to Rotate Clip Path Without Rotating Image

How to Rotate Clip Path without rotating image?

Use the image as a background of a pseudo element and rotate it in the opposite direction:

.image {
  width: 200px;
  height: 200px;
  margin: 20px;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  animation: clipRotateAnim 2s linear infinite;
  position: relative;
  overflow: hidden;
}

.image:before {
  content: "";
  position: absolute;
  inset: -10%;
  background: var(--i) center/cover;
  animation: inherit ;
  animation-direction:reverse;
}

@keyframes clipRotateAnim {
  to {
    transform: rotate(360deg)
  }
}

<div class="image" style="--i:url(https://images.pexels.com/photos/1025804/pexels-photo-1025804.jpeg?auto=compress&cs=tinysrgb&h=350)">
</div>

css rotate introduces outline when using SVG clip-path or mask

As a workaround you could rotate the clipPath instead:

#blob {
  background: red;
  width: 500px;
  height: 500px;
  clip-path: url(#myClip);
}

<div id="blob"></div>
<svg viewBox="0 0 397 409">
    <defs>
        <path d="M320.403196,424.677624 C426.787532,365.585154 447.310044,306.188587 433.45394,197.28033 C419.597836,88.3720737 316.997962,53.8862578 227.347416,40.9086547 C144.650118,28.9375873 104.472702,88.6407456 69.862267,131.812053 C15.52584,199.588564 48.3439099,300.905451 80.8563197,361.757908 C110.80391,417.809872 214.018859,483.770094 320.403196,424.677624 Z" id="path-1" />
        <clipPath id="myClip" transform="rotate(20)" transform-origin="center">
          <use href="#path-1"></use>
        </clipPath>
    </defs>
</svg>

Rotate clip-path from bottom right side to the bottom left side

You can do that by just using transfomr: rotateY(0.5turn); to rotate that 90deg and make that animation from right.

EDIT

change the angle of the background-gradient -270deg to move the dark side to right.

button {
  background: #FB5D5D;
  width: 350px;
  height: 54px;
  border-radius: 4px;
  position: relative;
  z-index: 10;
  overflow: hidden;
  color: white;
  border: none;
  transition: clip-path 3s ease, transform 3s ease, -webkit-clip-path 3s ease;
}

button:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-270deg, #D92121 0%, #FF6464 100%);
  z-index: -1;
  transition: clip-path .3s ease;
  clip-path: polygon(200% 0, 0 200%, 0 0);
  transform: rotateY(0.5turn);
}

button:hover:after {
  clip-path: polygon(0 0, 0 0, 0 0);
}

<button type="submit" class="w-full font-bold">Send</button>

Rotate frame but not image

1) PNG pseudo-mask overlay

I created a simple HTML/CSS solution, but is only possible with the following three criteria:

The background color behind the image is a solid color
There is enough margin on all sides of the image
You have Photoshop or some comparable image editing software

Working Example

body {  background-color:#222222;}
.hex-hack {  position:relative;  top:0;  left:0;}.base-image {  position:relative;  top:0;  left:0;  z-index:1;  margin: 84px;}
.hex-overlay {  position:absolute;  width:568px;  height:568px;  top:0px;  left:0px;  z-index:3;  -moz-transition: all 1s ease-in-out;  -webkit-transition: all 1s ease-in-out;  -o-transition: all 1s ease-in-out;  transition: all 1s ease-in-out;}
.hex-overlay:hover {   -ms-transform: rotate(30deg); /* IE 9 */   -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */   transform: rotate(30deg);}

<body>  <div class="hex-hack">    <img class="base-image" src="https://lorempixel.com/output/technics-q-g-400-400-2.jpg" alt="Sample Image" />    <img class="hex-overlay" src="https://i.imgur.com/zYa31Tw.png" alt="Sample Image" />  </div></body>

Create a teardrop like css shape without rotation and with an image as background

You can use an img instead of background-image and counteract the rotation with transform: rotate(-45deg):

.figure {
  width: 180px;
  height: 180px;
  border: 1px solid #32557f;
  border-radius: 0 50% 0% 50%;
  transform: rotate(45deg);
  bottom: -50px;
  position: relative;
  left: 17px;
  overflow: hidden;
}

img {
  height: 142%;
  transform: rotate(-45deg) translateY(-39%);
}

<div class="figure">
  <img src="https://images.unsplash.com/photo-1593642634315-48f5414c3ad9" />
</div>

Clip and a transform:rotate(...)

First off, clip isn't new to CSS3. In fact, it's been deprecated in favor of an entire collection of new properties.

Second, here's what the CSS2.1 spec says about clip:

In CSS 2.1, the only valid <shape> value is: rect(<top>, <right>, <bottom>, <left>) where <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and <left> specify offsets from the left border edge of the box. Authors should separate offset values with commas.

This means:

clip works on the element itself. No other element is affected.
clip: auto, or clip: rect(auto, auto, auto, auto) has no effect on an element because it's the same as not clipping the element at all. Any transforms that may be in effect are irrelevant because they actually transform the clipping region along with the rest of the element.

To clip an absolutely-positioned element to its containing block, use overflow: hidden on the containing block instead. Ensure that you actually designate its containing block using position: relative or similar.

Aligning SVG Clip Path on top of image

The problem appears to be that you extracted the shape and converted it to objectBoundingBox coordinates relative to itself. So the objectBoundingBox coords are no longer relative to your attack disc image.

What you can do is apply a transform to the clip path to scale it down to where it should be. By trial and error I worked out an appropriate scaling that gets it to match the shape it is supposed to clip.

transform="translate(0.5,1) scale(0.415,0.52) translate(-0.5,-1)"

.svg {
  position: absolute;
  width: 0;
  height: 0;
}
.clipped {
  width: 884px;
  height: 884px;
  background: turquoise url(https://zuffdaddy.github.io/uboat-attack-disc/images/4.png);
  background-size: cover;
  -webkit-clip-path: url(#my-clip-path);
  clip-path: url(#my-clip-path);
}

<svg class="svg">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.501,0 C0.556,0,0.555,0.04,0.555,0.04 C0.555,0.099,0.984,0.229,0.994,0.232 S1,0.243,0.999,0.251 C0.976,0.284,0.874,0.421,0.656,0.469 C0.656,0.469,0.648,0.47,0.647,0.474 C0.646,0.48,0.572,0.984,0.57,0.992 C0.569,0.996,0.569,0.999,0.561,0.999 C0.522,1,0.516,1,0.502,1 C0.487,1,0.482,1,0.443,0.999 C0.434,0.999,0.434,0.996,0.433,0.992 C0.432,0.984,0.358,0.48,0.357,0.474 C0.356,0.47,0.347,0.469,0.347,0.469 H0.347 C0.129,0.421,0.027,0.284,0.005,0.251 C0,0.243,0,0.236,0.01,0.232 S0.449,0.099,0.449,0.04 C0.449,0.04,0.447,0,0.502,0" transform="translate(0.5,1) scale(0.415,0.52) translate(-0.5,-1)"></path></clipPath>
</svg>

<div class="clipped"></div>

Turn clipped image with css

I don't think you want to use transform: rotate(); or similar here because the image will get tipped on its side. I would stick with clip-path but use polygon instead of inset.

.avatar {  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}

<img class="avatar" src="https://via.placeholder.com/100x100">

How to Rotate Clip Path Without Rotating Image