1

I have to simulate a "wind blow on a plate" and researching a little I found the rotate property, but when I apply it it is rotating the whole image, as shown in the gif below.

fall

However I expected to get something like the image below, but smoother.

enter image description here

Which property to use so that I keep the floor (part where the plate is stuck) in the fixed image?

David
  • 67
  • 5

1 Answers1

1

Use transform-origin: bottom center.

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
  margin: auto;
  border: 1px solid black;
  width: 200px;
  height: 100px;
  background-color: coral;
  color: white;
  animation: mymove 5s infinite;
  transform-origin: bottom center
}

@keyframes mymove {
  0% {
  transform: rotate(-20deg);
  }
  50% {
  transform: rotate(20deg);
  }
  100% {
  transform: rotate(-20deg);
  }
  
}
</style>
</head>
<body>

<h1>Animation of transform</h1>

<p>Gradually rotate the element around the bottom center:<p>

<div id="myDIV">
  <h1>myDIV</h1>
</div>

</body>
</html>

Found here: https://stackoverflow.com/a/6633676/13867483

Wudfulstan
  • 129
  • 11
  • Thanks @Wulfstan, but what I want is a fixed-bottom pendulum movement, the solution you gave apparently replicated my problem. – David Dec 20 '22 at 07:39
  • Sorry, I understand, in your image you have a mound of snow under the sign which can't move either. To do this you'll need to make that line part of the fixed background image and remove it from the sign image. Ensure that the sign is placed in exactly the right spot over the background using the code from https://stackoverflow.com/a/57307551/13867483. – Wudfulstan Dec 21 '22 at 08:41
  • 1
    Thanks @Wulfstan, it worked, apparently using transform-origin really solved my problem, Answer accepted =) – David Dec 21 '22 at 09:52