Make css3 transition always rotate in one direction

Question

I try to always fold the front / back panel in the same direction. I implemented a flip using css and javascript, but it’s not easy for me to think about how to make it always rotate to the right, not rotate to the right, and then return to the left.

I mainly use div with 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 "flipped" class to the div, which changes 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); } 

Do you just need to increase the angle of rotation? any other ideas?

Here is the current status and full css in fiddle

Answer 1

I do not think that this can be done with the help of transformations. Maybe you can do it with keyframes. 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 the same as you. Please note that the direction of rotation is always the same.

Another possibility is mixing the transition and animation (for changing when the transition will 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>