8

I am trying to use webkit's support for CSS3 transform: matrix3d(<matrix>) to create a 'falling card' effect. (The only target for the output of this is Chrome)

The end effect should transition through the 4 stages below and end up as just a horizontal line:

enter image description here

Here is the CSS I have now:

#test { 
            margin: auto auto;
            height: 200px;
            width: 200px;
            border:1px solid black;
            background-color: lightblue;
            -webkit-perspective: 1000; 
            -webkit-transform-origin: 50% 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-animation-name: flip-card;        
            -webkit-animation-duration: 1s;        
            -webkit-animation-iteration-count: infinite;        
            -webkit-animation-timing-function: linear;
            -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
        }
         @-webkit-keyframes flip-card {
            0%    {-webkit-transform: ;}
            100%    {-webkit-transform:
                        matrix3d(1, 0, 0, 0,
                                 0, 1, 0, 0, 
                                 0, 0, 0, 0, 
                                 0, 0, 0.001, 1);}
        }

And the HTML is simple for testing:

<body>
   <div id="test">this div should fall forward...</div>
</body>

The matrix3d in the above was based on reading this SO question, but it produces a shrinking square that flips around the x-axis defined by the bottom of the initial box.

I understand that CSS 2d matrix can only produce rectangles and parallelograms by transformation of a box and that irregular shapes need the matrix3d transform operation (this was helpful in refreshing my fading linear algebra!), but I seem to only be able to produce rectangles and parallelograms.

I've looked around at some of the SO questions tagged with matrix and transformation. Most of them are not CSS based and I have not been able to get the transformation I want.

Community
  • 1
  • 1
beggs
  • 4,185
  • 2
  • 30
  • 30
  • 2
    I created a tool to fiddle with css transformation values here: http://www.duopixel.com/stack/webkitmatrix/, but I'm afraid I couldn't produce a trapezoid with Chrome. Give it a try. – methodofaction Feb 10 '11 at 14:00
  • @Duopixel: that's a great tool. I can make a trapezoid in Safari... but skewed on the Y-axis not the X-axis by moving Row-1, Column4 slider (the top right slider). In Chrome that same slider creates a parallelogram. My understanding is that I should be moving the Row-4, Column-3 slider to create the X-axis parallelogram, but it has no effect in Safari or Chrome. – beggs Feb 11 '11 at 06:02
  • This [CoffeeScript fiddle](http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/#cp_embed_ifnqH) may be useful. The blog page it's embedded on has some useful explanations as well. – mbomb007 Oct 20 '15 at 19:20

3 Answers3

9

-webkit-perspective doesn't work in Chrome yet (just Safari), so this won't work (try your code in Safari). Also 3D transforms in Chrome, in general, are a bit iffy, and don't combine well with gradients, for one.

Also rotate3d(1, 0, 0, 90deg) works just as well as a matrix to accomplish what you're doing. The matrix notation is just a short way of combining 3D rotate, skew, move and origin into a single array. Since you're only rotating around the x-axis, you don't need to go to these lengths.

webkit-transform: perspective(800) rotate3d(1, 0, 0, -90deg)

Is exactly what you need.

Update: Here is a link to a jsfiddle with exactly what you are looking for that works in both chrome and safari. Please note that its important to specify that the transform origin for the flip is the same as the origin for the perspective. Webkit-perspective origin specifies where the "camera" is in 3D space relative to any 3d transforms and it's easy to get unintuitive results if you're not careful.

2nd Update: Perspective is now supported in all edge browsers (although firefox's anti-aliasing has little to recommend it (and needs -moz obviously))

3rd Update: Updated the fiddle for cross browser for Firefox, IE and unprefixed.

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • Interesting, I was using rotateX() but it does not provide the perspective that the object is falling forward. I added various perspective settings and key frames but could never get the '3D' effect. I'll try Safari and see what's different. – beggs Feb 11 '11 at 02:46
  • I've tried the perspective changes in safari 5.0.3 (windows) and there is not effect. In the tool that @Duopixel mentioned in his comment I cannot get the X-axis trapezoid, only a Y-axis one in Safari, while Chrome will only produce a Y-axis parallelogram. Looks like the answer is "not possible". – beggs Feb 11 '11 at 06:09
3

I was reading the CSS transition spec when I noticed border-width is animatable, and you can fake trapezoids using border widths. This means you can fake falling cards in Chrome, Opera and FF4!

#stage {
  margin-top: 200px;
  position: relative;
}

#trapezoid {
    position: absolute;
    bottom: 0;
    border: solid 1px #fff;
    border-bottom: solid 200px #c00;
    width: 200px;
    -webkit-transition: all ease 1s;

}

#stage:hover #trapezoid {
  border: solid 50px #fff;  
  border-bottom: solid 20px #f11;
  width: 100px;

}

Of course, this has major caveats: in your example the card is falling frontward, I tried but it seems this is not possible with this technique. Any content inside the shape won't be transformed, it's just the card shape. Oh, and the card shape can't have any borders. Major drawbacks that limit it's real-life application.

Still, it's pretty cool! Play with it here: http://jsfiddle.net/mxgAu/

methodofaction
  • 70,885
  • 21
  • 151
  • 164
0

If you are using IE10, then the solution could be:

.up{
    -ms-transform-origin: 50% 100%;
    -ms-transform: perspective(100px) rotateX(7deg);
}

.down{
    -ms-transform-origin: 50% 0%;
    -ms-transform: perspective(100px) rotateX(-7deg) scale(1);
}
frantisek
  • 366
  • 1
  • 4
  • 8