Question

我正试图在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>

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

Answer 1

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

Answer 2

翻转的初始化不是用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事件处理程序。

Answer 3

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

Answer 4

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

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

这样你的3d变换就会在每个浏览器中渲染......：）

关闭CSS 3d视角

4 个答案: