5

我一直在尝试为我一直在从事的项目创建一个 3D 外观的卡片翻转类型的动画。不幸的是，我的动画看起来并不完全是 3D。

我一直在使用本指南。在第一个例子中，这个人设法让它看起来像 windows 背景在翻转。但是，当我尝试在JSFiddle上使用相同的代码时，结果与他的不同。

他的演示代码产生了下面的效果。当卡片被翻转时，它会导致一侧变小，给人一种透视的印象： 在此处输入图像描述

在我的 JSFiddle 上使用他的代码（除了不同的背景），两侧似乎始终保持相同的大小： 在此处输入图像描述

有人可以向我解释我错过了什么，或者如何在他的网站上获得相同的透视效果吗？提前致谢。

他的 HTML 代码：

<div id="f1_container">
<div id="f1_card" class="shadow">
  <div class="front face">
    <img src="/images/Windows%20Logo.jpg"/>
  </div>
  <div class="back face center">
    <p>This is nice for exposing more information about an image.</p>
    <p>Any content can go here.</p>
  </div>
</div>
</div>

他的 CSS 代码：

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}
4

2 回答 2

3

看到他说他从 CSS 中去掉了供应商前缀以保持干净吗？我打赌那是你的问题。其中一些 CSS 属性不是完全标准的，而是在具有不同供应商前缀的不同浏览器中实现。我实际上不确定哪些，但谷歌可以提供帮助。

编辑：嗯。好吧，无论如何，CSS 是罪魁祸首，但我实际上并没有看到很多供应商前缀。我将他的实际 CSS 从页面上拉下来，并将其粘贴到您使用的“干净” CSS 的位置，这使得小提琴工作。他真正的 CSS 是：

#f1_container {
    height: 281px;
    margin: 10px auto;
    position: relative;
    width: 450px;
    z-index: 1;
}
#f1_container {
    perspective: 1000px;
}
#f1_card {
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1s linear 0s;
    width: 100%;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
    box-shadow: -5px 5px 5px #AAAAAA;
    transform: rotateY(180deg);
}
.face {
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    width: 100%;
}
.face.back {
    -moz-box-sizing: border-box;
    background-color: #AAAAAA;
    color: #FFFFFF;
    display: block;
    padding: 10px;
    text-align: center;
    transform: rotateY(180deg);
}
于 2013-11-14T21:51:04.773 回答
2

他们有一些不正确的 CSS ......在示例中，他有 class .back.face，这应该是.face.back（不是为什么它不工作，正如所指出的那样。只是清理它）。正如其他海报指出的那样，其他问题是罪魁祸首。我创建了一个新的 jsFiddle。不过，我会使用 jQuery 翻转插件，因为 IE 将很难呈现这种效果。

http://jsfiddle.net/JJrHD/1/

于 2013-11-14T21:58:01.610 回答