- This topic is empty.
January 2, 2017 at 7:17 am #249566damcelParticipant
To see what I am doing, it’s best to check the pen:
What I have there works so far, I have split the image into 5 sections and given each an animation delay, looks nice, this is exactly what I wanted, almost:-)
Now I want to split up the image further into say 50 segements, and this is where I run into issues. I have done it so far with css background positioning, but as you can see on line 45-61 in the CSS, that is not working, I have tried to change the y value on the background position in many ways, but to no avail.
So, yeah, how can I split this up into many more sections with the same effect:-)
It;s so weird, I think I am missing a couple elephants in the room here, but can’t find a solution.January 2, 2017 at 9:18 am #249580BeverleyhParticipant
I have done it so far with css background positioning, but as you can see on line 45-61 in the CSS, that is not working, I have tried to change the y value on the background position in many ways, but to no avail.
Changing the background-position works as expected. It’s easier to see what’s happening with more streamlined CSS http://codepen.io/anon/pen/ygBrXb
BTW – I couldn’t see what the
---Backdivs/CSS was doing so you’ll need to explain those to me.January 2, 2017 at 2:29 pm #249600damcelParticipant
Thanks for that, duuuhh, I have just realized what I had wrong, I tried to add more divs and incementing the background pos by 25%, when it always has to be by 100%:-)
The –back class is to make it truly 3d, if you slow it down you will see you don’t have a backside visible. The –back class is the same picture, just rotated around 180degrees.
I will finish this now and cut it into 50 pieces:-)
Btw is there a way to generate the html and css for this kind of stuff with Java or something? To avoind typing so much.
Something like this loop in JS , line 14-16.
It doesnt add it visibily to the element there, though.
Works in the console, but the console gives me some more characters which i need to delete then.
- The forum ‘CSS’ is closed to new topics and replies.