使用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时更改background-image（在90度或300毫秒处）。

有更好、更简单的解决方法吗？谢谢！

- user2655665

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定时运行，以预定义的间隔时间为准：

@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 “transform”文章参考：https://css-tricks.com/snippets/css/keyframe-animation-syntax/

- dreamweiver

---

我想在y轴上进行卡片翻转，并且我想使用JavaScript来按需启动动画。 - user2655665

你可以使用:rotateY(...)来绕Y轴旋转。 - dreamweiver

我该如何使用JavaScript触发动画？这是实际的问题。看看我的代码-我已经在使用rotateY()了。 - user2655665

@user2655665：你能基于你当前的代码创建一个 jsfiddle 吗？我会尝试修复它。 - dreamweiver

@user2655665：兄弟，我知道你已经很久以前就问过这个问题了，但是无论如何，我已经添加了代码以定时方式运行动画 :) - dreamweiver

Answer 2

你可以只使用CSS3来实现它：

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

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

- Petar Vasilev

---

我不知道你是否看过他的问题，但他使用了CSS3旋转和动画。 - A1rPun

我想以随机间隔（在30到150毫秒之间）连续触发大约15个div。 - user2655665