8

I am trying to have a front-/backside div flipping always in the same direction. I implemented the flip with css and javascript, but I have a hard time thinking about how to make it always rotate to the right, instead of rotate to the right and then coming back to the left.

I basically use a div with the follwing css

  /* flip speed goes here */
  .flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;

    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
    border-radius: 5px;
  -webkit-border-radius: 5px;
    padding: 5px;
    margin-left: 3px;
    z-index: 3;
    width: 160px;
    height: 145px;
    display:block; 
  }

and when the user clicks on it I add the class "flipped" to the div which changes the css to this:

      /* flip the pane when hovered */
  .flip-container.flipped .flipper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

should I just increment always the rotation angle? any other ideas?

Here is the current status and the full css in a fiddle

tmaximini
  • 8,403
  • 6
  • 47
  • 69
  • http://jsfiddle.net/7WgKL/2/ – tmaximini Jan 08 '13 at 16:02
  • http://stackoverflow.com/questions/2584138/css3-continous-rotate-animation-just-like-a-loading-sundial Seen this? – Alex W Jan 08 '13 at 16:03
  • hi Alex, no haven't seen this but this does not really answer my question. the problem is when I go from 180 back to 0 degrees, it changes the direction of the rotation. – tmaximini Jan 08 '13 at 16:10
  • That is common when using transforms, you should just make the value negative and it will go in the direction you expect. – Alex W Jan 08 '13 at 16:12

1 Answers1

4

I don't think that it can be done with transforms. May be you can do it with keyframes. A similar code:

@-webkit-keyframes rotate1 {
    from {-webkit-transform: rotate(0deg)}
    to {-webkit-transform: rotate(180deg)}
}
@-webkit-keyframes rotate2 {
    from {-webkit-transform: rotate(180deg)}
    to {-webkit-transform: rotate(360deg)}
}

#rotable {
    background-color: red;
    -webkit-animation-name: rotate2;
    -webkit-animation-duration: 3s;
    -webkit-transform: rotate(180deg); 
}

#rotable:hover {
    background-color: yellow;
    -webkit-animation-name: rotate1;
    -webkit-animation-duration: 3s;
}

does a similar thing to what you want. Notice that the turning direction is always the same.

Another posibility, mixing transition and animation (for the change where the transition would go in the opposite direction ...)

.container {
  perspective: 500px;
}

.test {
  transform: rotate(360deg);
  transition: transform 4s;
}

.container:hover .test {
  transform: rotateY(180deg);
  animation: turn 4s;
}

@keyframes turn {
  from {transform: rotate(0deg);}
}

div {
  display: inline-block;
  width: 200px;
  height: 200px;
}

.test {
    background-color: lightblue;  

}
<div class="container">
<div class="test">TEST</div>
</div>
vals
  • 61,425
  • 11
  • 89
  • 138
  • 1
    There is no need to use the animation, it can indeed be done with transitions. Animations are useful when one has to deal with more complicated timing issues. In a simple case like this with just a beginning and an end point, the transition will be the most efficient way. Further, this will break (I think) if one tries to do multiple clicks to trigger animation (I suspect the OP copied the code from a hover example). This answer does have an interesting use of the animation though which I believe is a useful trick for other problems. – thisiate Jun 13 '14 at 20:13
  • 2
    @thisiate Yes, of course it can be done inspecting the current transform rotation and always increasing it. In my answer, I was asuming that fixed styles where what the OP wanted. Anyway, good point. – vals Jun 13 '14 at 21:49
  • @vals sure seems like this is true. But that bit hacky because your variable will ultimately wrap (even if an float is so large it would virtually never happen). There should be a cleaner way to do it but I haven't found it yet. – clearlight Dec 25 '15 at 13:29
  • @nerdistcolony I have added another posibility. But it will also fail when changing states in the middle of the transition .. – vals Dec 26 '15 at 10:40