How to track the number of pixels an object is at

HTML-CSS
1

Hi!
I’m trying to make a css animation where the element moves in a circular motion 45 degrees to -45 degrees around its own X axis, while at the same time the parent element moves up and down.
To do so I need to track the exact place the turning point is at, pixel-wise.
There must be a way to do so.
Here I include the link to my pen.
Thank you.
https://codepen.io/33P/pen/qBaOQbr?editors=1100

2

I struggle with imagining what you’re trying to achieve, are you sure you want to rotate the bird around its x-axis? (that would mean it tilts backwards “inside the screen”, which would only make it look smaller).
Rotating it around the y-axis would make it look slimmer.

I’ve added some transforms to your keyframes, is that doing what it does? Otherwise, change those to rotateX or rotateY:

@keyframes flying-bird {
  0% {
    top: 0px; transform:rotateZ(-45deg)
  }
  50% {
    top: 50px; transform:rotateZ(45deg)
  }
  100% {
    top: 0px; transform:rotateZ(-45deg)
  }
}

You might also want to look into the transform-origin property:

1 Like
3

@jsdisco Thank you so much for answering. Maybe I wasn’t clear enough. The bird’s body is the parent element, what I want to rotate are the wings, going up and down as if flapping. But the thing is at the same time the bird is going up and down. Sorry if I didn’t make myself clear. I’ll peruse your code anyway to see if I can apply it to the wings alone. Thank you!

4

@jsdisco OOOK! I applied the transform-origin plus the code you provided and it’s doing almost what was expected to do. Now I want to add blurry wings to represent the flapping movement more completely.
Thank you so much, I didn’t expect it to be so easy. Sometimes the right code word is just a step away.
Edit: Funny thing the right wing is moving as expected but not the left wing. I’ll revise the code and see what I’m doing wrong.

5

The left wing will work if you just remove the top property from the animation (you can safely remove it from the right wing, too, it has no effect).

Both wings are within the bird container, so they’re moving up and down with the body anyway. You’ve put position:relative on the left wing (that’s why animating the top property has an effect - and messes things up), but the right wing has no position attribute set, so the top animation does nothing there.

I’d also set the animation-duration for both wings to 2s, that would make it more realistic. Are you building a flappy bird clone?

1 Like
6

I see, a lot wrong here.
So thanks for your help, this is my first css animation and there’s a lot to learn yet.
Oh, you mean this? No, this looks a lot more complicated. https://g.co/kgs/DyjfSQ