视频嵌入和 CSS 过渡和变换

Question

我已向包含视频的容器 div 添加了过渡效果。我在应该嵌入视频的地方出现黑屏。我尝试了 youtube 和 vimeo，但它们都无法正常工作，所以我认为这与 flash 有关。当我将过渡设置注释掉时，视频又可以工作了。有什么想法会发生什么以及如何解决？

编辑：

http://jsfiddle.net/bUFXA

代码如下：

<div class="super-container">   
<section class="main-content">   
    <div class="container">
        <div class="inner">
            <div class="row">
                <div class="span8">                         
                    <div class="entries">

                        <article id="post-168" class="post-168 post type-post status-publish format-video hentry category-uncategorized category-videos tag-bring-the-noize tag-m-i-a tag-video instock">
                            <div class="entry-header">
                                <div class="video_player">
                                    <iframe width="850" height="478" src="http://www.youtube.com/embed/cCkIYkaLBGs?feature=oembed" frameborder="0" allowfullscreen></iframe>
                                </div><!--video_player-->
                                <div class="video-caption">M.I.A. - Bring The Noize</div>                   
                            </div><!-- .entry-header -->


                            <div class="entry-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu feugiat purus. Quisque urna diam, consectetur sit amet est id, rhoncus sollicitudin odio. Phasellus rutrum tellus vitae tincidunt mattis. Proin lobortis pharetra hendrerit. Vivamus id urna arcu. Pellentesque luctus nulla sapien, vel interdum mi luctus a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu feugiat purus. Quisque urna diam, consectetur sit amet est id, rhoncus sollicitudin odio. Phasellus rutrum tellus vitae tincidunt mattis. Proin lobortis pharetra hendrerit. Vivamus id urna arcu.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu feugiat purus. Quisque urna diam, consectetur sit amet est id, rhoncus sollicitudin odio. Phasellus rutrum tellus vitae tincidunt mattis. Proin lobortis pharetra hendrerit. Vivamus id urna arcu. Pellentesque luctus nulla sapien, vel interdum mi luctus a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu feugiat purus. Quisque urna diam, consectetur sit amet est id, rhoncus sollicitudin odio. Phasellus rutrum tellus vitae tincidunt mattis. Proin lobortis pharetra hendrerit. Vivamus id urna arcu.</p>
                            </div><!-- .entry-content -->
                        </article><!-- #post -->

                        <article> (...) </article>
                        <article> (...) </article>
                        <article> (...) </article>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS：

.super-container {
position: relative;
width: 100%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

Answer 1

好的，我设法让它工作。我只需要像这样设置translate3d to 1 的值：

 -webkit-transform: translate3d(1, 0, 0);
 -moz-transform: translate3d(1, 0, 0);
 -ms-transform: translate3d(1, 0, 0);
 -o-transform: translate3d(1, 0, 0);
 transform: translate3d(1, 0, 0);

我还使用了 translateX 而不是 translate3d，因为我需要它用于隐藏菜单，其中整个内容都移到了左侧。所以我毕竟只需要 X 坐标。无论如何，默认值需要是 1 而不是 0。这解决了视频的问题。 JSFiddle 在这里：http://jsfiddle.net/UrPMj/13/

Answer 2

在我用您的代码构建的jsFiddle 中，似乎没有任何问题。但我也没有看到任何动画。你是先看动画再看播放器吗？

在这里你可以看到 jsFiddle 在我的电脑上是如何显示的：

我认为您的问题出在代码中：

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;

因为如果我做一个简单的动画（一行），它工作得很好。 例如：

.super-container {
  position: relative;
  width: 100%;
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -webkit-transform:rotate(7deg); /* Safari and Chrome */
}

产量：

显示非常好。您可以查看HERE。

所以我的建议是你逐行重写 CSS3 动画，看看它在哪里停止工作（现在你有太多可能与其他代码冲突的冗余代码；因此阻止 iFrame 的显示）