CSS Image Flip on Load

2 Views

I am stumped at this and hoping someone can help.

I have a page background which is done in HTML and shows off a client’s Instagram photos. Using this plugin: justifiedgrid.com

Read More

The client would really like the images to flip on page load like this http://www.starworksartists.com/hair/adir-abergel/instagram/

I have tried adding CSS to the images like so 

.jig-loaded  img {
    transition: 0s cubic-bezier(0.175, 0.885, 0.32, 1.1) !important;
    transform: rotateY(0deg) translateX(0px) !important;
    opacity: 1;
}

But doesn’t seem to work.

Any help would be appreciated.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. You could use css keyframe animation:

    img {
  -webkit-animation: flip 1s;
  animation: flip 1s;
}
@-webkit-keyframes flip {
  from {
    transform: rotateY(90deg)
  }
  to {
    transform: rotateY(0deg)
  }
}
@keyframes flip {
  from {
    transform: rotateY(90deg)
  }
  to {
    transform: rotateY(0deg)
  }
}
    <img src="http://i.stack.imgur.com/vNQ2g.png?s=128&g=1" />

  2. The best way to do this would be set the initial state of the images to the transformed version, apply a transition to it as well, and then use JavaScript to add a class that sets the transform back to the “normal” state (not transformed).

    This way it’s easy to keep track of states and you can toggle between the two states with no jumping in between. Demo (the onload is handled by JSFiddle in the demo – you’ll need to add it yourself in your code)

    Otherwise you could use a keyframe animation on load with animation-direction:forwards that the goes from the transformed state to the non-transformed state. If all you’re doing is an effect on the initial page load it is fine, but if it’s to be any more interactive you should use transitions instead.