Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Issues with splitting up an image for a tile 3d css animation

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #249566
    damcel
    Participant

    To see what I am doing, it’s best to check the pen:

    http://codepen.io/damianocel/pen/QdLYRJ

    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.

    #249580
    Beverleyh
    Participant

    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.

    #249600
    damcel
    Participant

    Hi Beverley,

    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.

    http://codepen.io/damianocel/pen/NdKYZP

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.