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度或300毫秒）时更改背景图像。

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

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 Way：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 animations

使用css和javascript将div翻转180度

2 个答案: