CSS 3d perspective off

Question

i'm trying to get a hang off the 3d transform functions in css. My code at this point is pretty much copied straight from a tutorial because no matter how hard i try i just cant seem to get it working properly. the link to how it's supposed to look is: http://desandro.github.com/3dtransforms/examples/card-01.html

and my code is:

<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>

like i said its pretty much word for word from the tutorial, only thing i changed was using hover instead of a button. Thanks for any help.

score 1 · Answer 1 · answered Jul 27 '12 at 22:07

1

add margin: 0 to the figures. The example has an external stylesheet that applies it, so it's not immediately obvious that it's necessary.

answered Jul 27 '12 at 22:07

freejosh

11,263
4
33
47

score 0 · Answer 2 · answered Jul 27 '12 at 22:13

The initialisation of the flip isn't be done with CSS .. It's done with Javascript via the file "flip-card.js":

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

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

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

This needs to be changes to an onHover event handler.

Danil Speransky · Answer 3 · 2012-09-20T02:44:39.200

0

There is a container which contains the figures, to place figures right in the container add rule to them: margin: 0px; (in default it is not 0).

edited Sep 20 '12 at 02:44

answered Jul 27 '12 at 22:14

Danil Speransky

29,891
5
68
79

score 0 · Answer 4 · answered Mar 11 '13 at 18:54

0

Hey there are two files utils.js and flip.js .. include both of them and in your css just use

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

so that your 3d transform will render in every browser... :)

answered Mar 11 '13 at 18:54

Tarun

195
10

CSS 3d perspective off

4 Answers4