CSS 3 fake 3D cube rotation between 2 boxes

问题

I've implemented a flip rotation using css:

.flip-card {
    position: relative;
    z-index: 1;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
}

.flip-card-content {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 0.5s ease-in-out;
    -o-transform-style: preserve-3d;
    -o-transition: all 0.5s ease-in-out;
    transform-style: preserve-3d;
    transition: all 0.5s ease-in-out;
}

.flip-card.flip-x.flipped .flip-card-content,
.flip-card.flip-x .flip-card-side.flip-card-back {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.flip-card.flip-x-inverse.flipped .flip-card-content,
.flip-card.flip-x-inverse .flip-card-side.flip-card-back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}

.flip-card.flip-y.flipped .flip-card-content,
.flip-card.flip-y .flip-card-side.flip-card-back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-card.flip-y-inverse.flipped .flip-card-content,
.flip-card.flip-y-inverse .flip-card-side.flip-card-back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.flip-card-side {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

You can see an example here: http://jsfiddle.net/jckMg/

But, now I seen this amazing effect: http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-19 And I want to reproduce the same transition, but I don't understand how it works, or better I understand that it makes use of pseudo selectors to "inject data", but I don't understand how to refactor my idea of having 2 divs switching between them instead of that. How can be done?

UPDATE:

The last experimental implementation is this: http://jsfiddle.net/w7y4N/ which works perfectly only in Firefox (in Chrome and Safari it's buggy)… can you fix it to be crossbrowser?

回答1:

UPDATE: This is accepted answer. My first answer included wrong kind of animation and since I used rotate-3d property, it wasn't working in IE. For reference, my first answer is left below accepted one.

Since IE doesn't support preserve-3d I modified code to rotate eache side seperately but for just two div's it's not big deal and code is pretty clean. Tested on Windows in Chrome 31, FF26, O18 and IE10. In IE9 it just flips content without making cool transition, but still works. For more legacy support I would probably just toggle sides visibility using modernizr classes.

DEMO

HTML

<div class="flip-card-content">
  <div class="flip-card-side-a" style="background:red">
    FRONT 
  </div>
  <div class="flip-card-side-b" style="background:green">
    BACK
  </div>
</div>

<button id="button">Flip</button>

CSS (Using SCSS, vendor prefixes omitted for brevity)

.flip-card-content {
    position: relative;
    margin: 100px;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.flip-card-side-a,
.flip-card-side-b {
    width: 100%;
    position: absolute;
    height: 100%;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
    transition: all .5s ease-in-out;
}

.flip-card-side-a {
  transform: rotateY(0deg) translateZ(100px);
  z-index: 1; // fixes buggy behavior in FF and Opera
}
.flip-card-side-b {
  transform: rotateY(90deg) translateZ(100px);
}

.flip .flip-card-side-a {
  transform: rotateY(-90deg) translateZ(100px);
}
.flip .flip-card-side-b {
  transform: rotateY(0deg) translateZ(100px);
  z-index: 1;
}

By default css rotates objects around it's center and you change that by setting transform-origin property to some value (in this case top and center). Since we changed origin point for transform rotating div for 180deg would put it above red div so we must rotate 270deg to put it up horizontally on the plane thus invisible. We get cool flip affect by setting rotate back to 0deg on click or whatever.

DEMO

回答2:

Here's a simpler demo I built on codepen. Basically we're making a link look like a box, then making the pseudo element the same size, and rotating it on the X-axis until it disappears (270deg). Then we transition the rotation to 0deg when it's hovered.

回答3:

After hours of playing around I came up with this implementation:

    .cube .cube-content {
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        -o-perspective: 1000px;
        perspective: 1000px;
        width: 200px;
        height: 200px;
        position: relative;
    }

    .cube .cube-content .front {
        position: absolute;
        width: 200px;
        height: 200px;
        background: red;
        z-index: 2;

        -webkit-transition: all 0.5s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -webkit-transform-origin: 50% 50% -100px;

        -moz-transition: all 0.5s ease-in-out;
        -moz-transform-style: preserve-3d;
        -moz-transform-origin: 50% 50% -100px;

        -o-transition: -o-transform 0.5s;
        -o-transform-style: preserve-3d;
        -o-transform-origin: 50% 50% -100px;

        transition: all 0.5s ease-in-out;
        transform-style: preserve-3d;
        transform-origin: 50% 50% -100px;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .cube .cube-content .back {
        position: absolute;
        width: 200px;
        height: 200px;
        background: green;
        z-index: 1;

        -webkit-transition: all 0.5s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -webkit-transform-origin: 50% 50% -100px;
        -webkit-transform: rotateY(90deg);

        -moz-transition: all 0.5s ease-in-out;
        -moz-transform-style: preserve-3d;
        -moz-transform-origin: 50% 50% -100px;
        -moz-transform: rotateY(90deg);

        -o-transition: all 0.5s ease-in-out;
        -o-transform-style: preserve-3d;
        -o-transform-origin: 50% 50% -100px;
        -o-transform: rotateY(90deg);

        transition: all 0.5s ease-in-out;

        transform-style: preserve-3d;
        transform-origin: 50% 50% -100px;
        transform: rotateY(90deg);

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .cube-flipped .cube-content .front {
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        -o-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    .cube-flipped .cube-content .back {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

Demo: http://jsfiddle.net/w7y4N/

It works perfectly on Firefox, but it's buggy on Chrome and Safari (not tested in Internet Explorer)

It would be super-cool to make it working cross-browser or at least gracefully degradable:P

来源：https://stackoverflow.com/questions/20499165/css-3-fake-3d-cube-rotation-between-2-boxes

标签

html

css

css3

css-animations