如何使用CSS3创建3D透视效果？

Question

如何使用CSS3创建3D透视效果？

htmlcss

5

我一直在尝试为我正在开发的项目创建一个类似于翻转卡片的3D动画，但不幸的是我的动画看起来并不完全像3D效果。

我一直在使用这个指南。在第一个示例中，这个人成功地使窗口背景看起来像在翻转。然而，当我在JSFiddle上尝试使用相同的代码时，结果与他的不同。

他的演示代码产生了如下效果。当卡片被翻转时，其中一面会变小，给人透视的印象： enter image description here

在我的JSFiddle中，使用他的代码（除了不同的背景），两侧似乎始终保持相同的大小： enter image description here

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

他的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;
}

- harvzor

请查看：http://threejs.org/ - Diodeus - James MacFarlane

2个回答

2

他们的CSS有些错误...在这个例子中，他使用了类名.back.face，实际应该是.face.back（并不是为什么它不能工作，正如其他人指出的那样。我只是纠正了一下）。其他问题是罪魁祸首，正如其他帖子所指出的那样。我已经创建了一个新的jsFiddle。不过我建议使用jQuery翻转插件，因为IE浏览器很难渲染这种效果。

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

- Mike Barwick

.back.face 和 .face.back 是相同的。 - Ben Lesh

@MikeBarwick：真的吗？有什么区别吗？ - user1618143

这是一个错误的答案。他因为不知道自己在说什么而被“降级”。我给你 .wrong.bro 和 .bro.wrong ... 他的回答没有解决问题，而是在试验中无意中通过添加浏览器前缀来修复了它。 - Ben Lesh

是的，我用过的每个 IE 版本都可以。尤其是那些实际允许3D CSS转换的版本。 - Ben Lesh

无法测试，因为我使用的是MAC电脑，但我被教导说这可能会有问题 - JavaScript也是如此。我还学习了正确的CSS语法和清晰的代码。如果您认为这样编码是可以接受的，请按照您的方式进行编码。这是你自己的事情。他不需要接受、使用甚至阅读我所做的。我只是挑剔而已。 :) - Mike Barwick

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1618143 · Accepted Answer

看到他说他已经去除了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);
}