javascript - 使用 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 度或 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 */

---

Above Transformation 也可以使用 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/