0

我正在尝试摆脱 css 中的 3d 变换函数。我此时的代码几乎是直接从教程中复制而来的，因为无论我多么努力，我似乎​​都无法让它正常工作。它应该如何看待的链接是：http ://desandro.github.com/3dtransforms/examples/card-01.html

我的代码是：

<html>
    <head>
        <style media="screen">      
            .container  {
                width: 200px;
                height: 260px;
                position: relative;
                -webkit-perspective: 800;
                }
            #card {
                width: 100%;
                height: 100%;
                position: absolute;
                -webkit-transform-style: preserve-3D;
                -webkit-transition: -webkit-transform 2s;
                }
            #card figure  {
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                -webkit-backface-visibility: hidden;
                }
            #card .face1  {
                background: red;
                }
            #card .face2  {
                background: blue;
                -webkit-transform: rotateY(180deg);
                }
            #card:hover  {
                -webkit-transform: rotateY(180deg);
                }
        </style>
    </head>

    <body>
        <section class="container">
            <div id="card">
                <figure class="face1">1</figure>
                <figure class="face2">2</figure>
            </div>
        </section>
    </body>
</html>

就像我在教程中逐字逐句地说的那样，我唯一改变的是使用悬停而不是按钮。谢谢你的帮助。

4

4 回答 4

1

添加margin: 0到figures。该示例有一个应用它的外部样式表，因此不是很明显它是必要的。

于 2012-07-27T22:07:16.590 回答
0

嘿，有两个文件 utils.js 和 flip.js .. 包括它们，并在你的 css 中使用

-webkit-transform-style
-moz-transform-style
-o-transform-style
transform-style

这样您的 3d 转换将在每个浏览器中呈现... :)

于 2013-03-11T18:54:41.730 回答
0

翻转的初始化不是用 CSS 完成的。它是通过文件“flip-card.js”用 Javascript 完成的：

var init = function() {
  var card = document.getElementById('card');

  document.getElementById('flip').addEventListener( 'click', function(){
    card.toggleClassName('flipped');
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

这需要更改 onHover 事件处理程序。

于 2012-07-27T22:13:42.807 回答
0

有一个包含数字的容器，将数字放在容器中，为它们添加规则：（margin: 0px;默认情况下它不是 0）。

于 2012-07-27T22:14:43.743 回答