使用css和javascript将div翻转180度

Question

我想使用触发css动画的javascript函数将div翻转180度。 我的div有以下声明：

.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);
    }
}

我想我的尝试是错误的。

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

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

另外我想在你看不到div时（90度或300ms）改变背景图像。

有没有更好更简单的方法来解决这个问题？ 提前致谢！

Answer 1

CSS3旋转变换可用于在x轴或y轴上翻转任何元素。

CSS：

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

在y轴上旋转div使用负值

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

---

还可以使用CSS3动画和关键帧在预定义间隔后运行以上转换：

@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+ */
 }

---

触发使用jquery在单击事件上旋转转换

jQuery的：

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

现场演示：

Css方式： http ： //jsfiddle.net/dreamweiver/x6v60t2f/

Jquery方式： http ： //jsfiddle.net/dreamweiver/LTNPs/2108/

参考CSS3“转换”文章： https ： //css-tricks.com/snippets/css/keyframe-animation-syntax/

Answer 2

你只能使用CSS3来做到这一点：

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

如果你想动画它，你可以使用CSS3 动画