使用css和javascript将div翻转180度

Question

I want to flip a div 180 degrees using a javascript function which triggers a css animation. My div has got the following declaration:

.start-photo-thumb
{
    position: relative;
    float: left;
    background: #444444;
    height: 192px;
    width: 192px;
    margin-right: 10px;
    margin-bottom: 10px;
    perspective: 1000px;
    animation: rotating 0.6s linear infinite;
    animation-play-state: paused;
}

@keyframes rotating 
{
    from
    {
        transform: rotateY(0deg);
    }
    to
    {
        transform: rotateY(180deg);
    }
}

I think I'm taking the wrong way with my attempt.

function flipPhoto(box)
{
    $('#' + box.id).css('animation-play-state', 'running');

    setTimeout(function(){
        $('#' + box.id).css('animation-play-state', 'paused');
    }, 600);
}

In addition I want to change the background-image at the moment you can't see the div (at 90 degrees or at 300ms).

Is there a better and easier way to solve that problem? Thanks in advance!

Answer 1

CSS3 Rotate transformation can be used for flipping any element across x or y axis.

CSS:

#container_2 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

to rotate a div on y-axis use negative values

  transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg); /* IE 9 */
  -webkit-transform: rotateY(-180deg); /* Safari and Chrome */

---

Above Transformation can also be timed to run after predefined interval using CSS3 animation and Keyframes:

@keyframes rotating 
{
    from
    {
        transform: rotateY(0deg);
    }
    to
    {
        transform: rotateY(180deg);
    }
 }

 #timed-animation{
    -webkit-animation: rotating 5s infinite; /* Safari 4+ */
    -moz-animation:    rotating 5s infinite; /* Fx 5+ */
    -o-animation:      rotating 5s infinite; /* Opera 12+ */
    animation:         rotating 5s infinite; /* IE 10+, Fx 29+ */
 }

---

Triggering Rotate transformation on click event using jquery

jQuery:

$('#foo').click(function() {
  $(this).css('-webkit-transform', 'rotateY(-180deg)');
  $(this).css('-moz-transform', 'rotateY(-180deg)');
  $(this).css('transform', 'rotateY(-180deg)');
});

LIVE DEMO:

Css Way : http://jsfiddle.net/dreamweiver/x6v60t2f/

Jquery way : http://jsfiddle.net/dreamweiver/LTNPs/2108/

Reference for CSS3 "transform" article: https://css-tricks.com/snippets/css/keyframe-animation-syntax/

Answer 2

You can do it using only CSS3:

div#div-id {
    transform: rotate(180deg);
}

if you want to animate it you can use CSS3 animations